使用 JavaScript 漂亮地打印 JSON

姚照宁

使用 JavaScript 美观印刷 JSON
                                                               
! P) z- R+ P8 g    解决方案:                                                               
! p9 h; m+ v2 t" S( k9 F7 u                                                                Pretty-printing 在JSON.stringify(). 第三个参数启用漂亮的打印并设置要使用的间距：

var str = JSON.stringify(obj,null,二、 / spacing level = 2

若需语法高亮，可使用一些正则表达式魔法，如下所示：
4 p4 R6 {, i9 G' M" D

• function syntaxHighlight(json)    if (typeof json != 'string')         json = JSON.stringify(json,undefined,2)；         json = json.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 ''   match   '    }code]查看这里的实际操作：jsfiddle
  
• 或以下完整片段：
  $ c$ X5 X9 G# s
• Hide code snippet[code]function output(inp)    document.body.appendChild(document.createElement('pre')).innerHTML = inp;}function syntaxHighlight(json)    json = json.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 ''   match   '    }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; }