如何使用JavaScript漂亮地打印JSON？

Question

如何使用JavaScript漂亮地打印JSON？

如何以易于阅读的格式显示JSON(供人类阅读)？我主要是寻找缩进和空格，甚至颜色/字体样式/等等。

Answer 1

漂亮打印是在JSON.stringify()..第三个参数允许漂亮的打印，并设置要使用的间距：var str = JSON.stringify(obj, null, 2); // spacing level = 2如果需要语法高亮显示，可以使用一些正则表达式魔术，如下所示：function syntaxHighlight(json) {     if (typeof json != 'string') {          json = JSON.stringify(json, undefined, 2);     }     json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');     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>';     });}或下面提供的完整片段：function output(inp) {    document.body.appendChild(document.createElement('pre')).innerHTML = inp;}function syntaxHighlight(json) {    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');    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>';    });}var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};var str = JSON.stringify(obj, undefined, 4);output(str);output(syntaxHighlight(str));pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }.string { color: green; }.number { color: darkorange; }.boolean { color: blue; }.null { color: magenta; }.key { color: red; }

Answer 2

如果你有一个对象你想印得很漂亮。如果从有效的JSON开始弦如果您想要打印得很漂亮，则需要首先将其转换为一个对象：var jsonString = '{"some":"json"}';var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);这将从字符串构建一个JSON对象，然后使用JSON strgify的漂亮打印将其转换为字符串。