使用 JavaScript 漂亮地打印 JSON

姚照宁

使用 JavaScript 美观印刷 JSON
                                                               
    解决方案:                                                               
                                                                Pretty-printing 在JSON.stringify(). 第三个参数启用漂亮的打印并设置要使用的间距：
- l6 A! l9 ^& a" |3 }# o

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

若需语法高亮，可使用一些正则表达式魔法，如下所示：
; G! M6 A/ y5 h4 X

, A1 g$ C/ N/ k% k4 d$ H
• 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
  % u/ P0 I& ?8 w" C% p# V  c
• 或以下完整片段：
  - p! G! _- M1 f. ]* ?
• 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; }