背景：

有時候我們需要將json數據直接顯示在頁面上（比如在做一個接口測試的項目，需要將接口返回的結果直接展示），但是如果直接顯示字符串，不方便查看。需要格式化一下。

解決方案：

其實JSON.stringify本身就可以將JSON格式化，具體的用法是：

JSON.stringify(res, null, 2); //res是要JSON化的對象，2是spacing

如果想要效果更好看，還要加上格式化的代碼和樣式：

js代碼:

function syntaxHighlight(json) { if (typeof json != string ) { json = JSON.stringify(json, undefined, 2); json = json.replace(/ /g, ).replace(/ /g, ).replace(/ /g,  return json.replace(/( (//u[a-zA-Z0-9]{4}|//[^u]|[^// ])* (/s*:)?|/b(true|false|null)/b|-?/d+(?:/./d*)?(?:[eE][+/-]?/d+)?)/g, function(match) { var cls = number  if (/^ /.test(match)) { if (/:$/.test(match)) { cls = key  } else { cls = string  } else if (/true|false/.test(match)) { cls = boolean  } else if (/null/.test(match)) { cls = null  return span >
樣式代碼:
 style  pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; } /style 
html代碼:
 pre id= result  /pre 
調用代碼:
$( #result ).html(syntaxHighlight(res));
效果: 
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！
相關推薦：
JavaScript實現獲取遠程的html到當前頁面中
淺談html轉義及防止javascript注入攻擊的方法
以上就是如何在html中顯示JSON數據的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。