将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数。
见MDN https://developer.m*oz*i*lla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。
示例代码如下：
html;">< html > < head > < meta charset="utf-8" / > < title >hello< /title > < 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 > < script type="text/javascript" > 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 class="' + cls + '" >' + match + '< /span >'; }); } < /script > < /head > < body > < pre id="result" > < /pre > < script type="text/javascript" > var songResJson={ "service": "ALL", "qt": 581, "content": { "answer": { "song": "如果缘只到遇见", "album": "如果缘只到遇见", "artist": "吴奇隆 严艺丹", "pic_url": "http://p1.musi*c.1*2*6.net/-u3WgIXsFNCW7d8Jy7pCEA==/5921969627395387.jpg" }, "scene": "music" } } document.getElementById('result').innerHTML = syntaxHighlight(songResJson); // $('#result').html(syntaxHighlight(songResJson)); < /script > < /body >< /html >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
注：相关教程知识阅读请移步到HTML教程频道。