我今天遇到了@Pumbaa80的代码问题。我试图将JSON语法高亮显示应用于我在Mithril视图中呈现的数据，因此我需要为JSON.stringify输出中的所有内容创建DOM节点。

我还将非常长的正则表达式拆分为其组成部分。

render_json = (data) ->
  # wraps JSON data in span elements so that syntax highlighting may be
  # applied. Should be placed in a `whitespace: pre` context
  if typeof(data) isnt 'string'
    data = JSON.stringify(data, undefined, 2)
  unicode =     /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/
  keyword =     /\b(true|false|null)\b/
  whitespace =  /\s+/
  punctuation = /[,.}{\[\]]/
  number =      /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/

  syntax = '(' + [unicode, keyword, whitespace,
            punctuation, number].map((r) -> r.source).join('|') + ')'
  parser = new RegExp(syntax, 'g')

  nodes = data.match(parser) ? []
  select_class = (node) ->
    if punctuation.test(node)
      return 'punctuation'
    if /^\s+$/.test(node)
      return 'whitespace'
    if /^\"/.test(node)
      if /:$/.test(node)
        return 'key'
      return 'string'

    if /true|false/.test(node)
      return 'boolean'

     if /null/.test(node)
       return 'null'
     return 'number'
  return nodes.map (node) ->
    cls = select_class(node)
    return Mithril('span', {class: cls}, node)

此处为Github上的上下文代码

我使用JSONView Chrome扩展插件（它非常漂亮：）：

编辑：添加了jsonreport.js

我还发布了一个在线独立的JSON漂亮打印查看器jsonreport.js，它提供了一个可读的HTML5报告，可以用来查看任何JSON数据。

您可以在新的JavaScript HTML5报告格式中阅读更多关于该格式的信息。

<!-- here is a complete example pretty print with more space between lines-->
<!-- be sure to pass a json string not a json object -->
<!-- use line-height to increase or decrease spacing between json lines -->

<style  type="text/css">
.preJsonTxt{
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 200%;
}
.boxedIn{
  border: 1px solid black;
  margin: 20px;
  padding: 20px;
}
</style>

<div class="boxedIn">
    <h3>Configuration Parameters</h3>
    <pre id="jsonCfgParams" class="preJsonTxt">{{ cfgParams }}</pre>
</div>

<script language="JavaScript">
$( document ).ready(function()
{
     $(formatJson);

     <!-- this will do a pretty print on the json cfg params      -->
     function formatJson() {
         var element = $("#jsonCfgParams");
         var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
     }
});
</script>

这里有一些东西来修饰这个老掉牙但很好的问题。如果您想将格式化的对象转储到控制台，但它仍像一团包裹的乱麻一样转储，隐藏字符如下？？？

'{\n    "_id": "630577bba145ff4f1",\n    "role": "user"}'

但你想要这种可爱？？：

{
    "_id": "630557672d877bba145ff4f1",
    "role": "user"
}

诀窍是将JSON.stringify（）包装在console.log（）语句中。如果你讨厌打字，尝试构建代码段来完成繁重的工作。。。

如果您正在处理大型对象，这非常有用。

在浏览器开发工具中的“代码段”部分添加一个代码段，如下所示（更多…）：

let o = <object to print>
console.log(JSON.stringify(o, null, 4))
console.log(o)

然后简单地替换为对象（可以从当前上下文中获得）并运行代码段。

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

如果以HTML显示，则应添加应答器<pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

例子：

var jsonObj={“streetLabel”：“Avenue Anatole France”，“city”：“Paris 07”，“postalCode”：“75007”；document.getElementById（“result before”）.innerHTML=JSON.stringfy（jsonObj）；document.getElementById（“resultafter”）.innerHTML=“<pre>”+JSON.stringify（jsonObj，未定义，2）+“</pre>”div｛float:left；clear:both；margin:1em 0；｝<div id=“result before”></div><div id=“result after”></div>

漂亮的打印是在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>';
    });
}

在这里查看实际操作：jsfiddle

或以下提供的完整片段：

函数输出（inp）{document.body.appendChild（document.createElement（'pre'））.innerHTML=inp；}函数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，函数（匹配）{var cls=“数字”；if（/^“/.test（匹配））{if（/：$/.test（匹配））{cls=“键”；}其他{cls=“字符串”；}}else if（/true|false/.test（匹配））{cls=“布尔值”；}else if（/null/.test（match））{cls=“null”；}return'<span class=“'+cls+'”>'+match+'</span>'；});}var obj={a:1，'b'：'o'，c:[false，'false'，null，'null'，{d:{e:1.3e5，f:'1.3e5'}}]}；var str=JSON.stringify（obj，未定义，4）；输出（str）；输出（syntaxHighlight（str））；前置{outline:1px实心#ccc；padding:5px；margin:5px；}.string｛color:绿色；｝.number｛color:深橙色；｝布尔｛color:blue；｝.null｛color:洋红色；｝.key｛color:红色；｝