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


当前回答

它工作得很好:

console.table()

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

其他回答

找不到任何能为控制台提供良好语法高亮显示的解决方案,所以这里是我的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"]});

出于调试目的,我使用:

console.debug("%o", data);

https://getfirebug.com/wiki/index.php/Console_APIhttps://developer.mozilla.org/en-US/docs/DOM/console

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:红色;}

根据彭彭80的回答,我修改了代码,使用console.log颜色(当然是在Chrome上),而不是HTML。控制台内可以看到输出。您可以编辑函数内的_variables,添加更多样式。

function JSONstringify(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, '\t');
    }

    var 
        arr = [],
        _string = 'color:green',
        _number = 'color:darkorange',
        _boolean = 'color:blue',
        _null = 'color:magenta',
        _key = 'color:red';

    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

这里有一个书签,您可以使用:

javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0);

用法:

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);

编辑:在变量声明之后,我试图用这一行转义%符号:

json = json.replace(/%/g, '%%');

但我发现Chrome不支持控制台中的%转义。奇怪的也许这在未来会奏效。

干杯