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


当前回答

您可以使用console.dir(),这是console.log(util.inspect())的快捷方式。(唯一的区别是它忽略了在对象上定义的任何自定义inspect()函数。)

它使用语法高亮显示、智能缩进、从键中删除引号,并使输出尽可能漂亮。

const object = JSON.parse(jsonString)

console.dir(object, {depth: null, colors: true})

对于命令行:

cat package.json | node-e“process.stdin.pipe(newstream.Writeable({write:cchunk=>console.dir(json.parse(chunk),{depth:null,colors:true})})”

其他回答

我使用JSONView Chrome扩展插件(它非常漂亮:):

编辑:添加了jsonreport.js

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

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

找不到任何能为控制台提供良好语法高亮显示的解决方案,所以这里是我的2p

安装并添加cli高亮显示依赖项

npm install cli-highlight --save

全局定义logjson

const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
                               highlight( JSON.stringify(obj, null, 4), 
                                          { language: 'json', ignoreIllegals: true } ));

Use

console.logjson({foo: "bar", someArray: ["string1", "string2"]});

以下是如何在不使用本机函数的情况下打印。

function pretty(ob, lvl = 0) {

  let temp = [];

  if(typeof ob === "object"){
    for(let x in ob) {
      if(ob.hasOwnProperty(x)) {
        temp.push( getTabs(lvl+1) + x + ":" + pretty(ob[x], lvl+1) );
      }
    }
    return "{\n"+ temp.join(",\n") +"\n" + getTabs(lvl) + "}";
  }
  else {
    return ob;
  }

}

function getTabs(n) {
  let c = 0, res = "";
  while(c++ < n)
    res+="\t";
  return res;
}

let obj = {a: {b: 2}, x: {y: 3}};
console.log(pretty(obj));

/*
  {
    a: {
      b: 2
    },
    x: {
      y: 3
    }
  }
*/

它工作得很好:

console.table()

在此处阅读更多信息:https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

漂亮的打印是在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:红色;}