背景：

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

解決方案：

其實(shí)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 
調(diào)用代碼:
$( #result ).html(syntaxHighlight(res));
效果: 
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP ！
相關(guān)推薦：
JavaScript實(shí)現(xiàn)獲取遠(yuǎn)程的html到當(dāng)前頁面中
淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法
以上就是如何在html中顯示JSON數(shù)據(jù)的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。