我如何以易于阅读(供人类阅读)的格式显示JSON?我主要寻找缩进和空白,甚至是颜色/字体样式等。
当前回答
用户Pumbaa80的答案很好,如果你有一个想要漂亮打印的对象。如果要从一个有效的JSON字符串开始打印,需要首先将其转换为一个对象:
var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);
这将从字符串构建一个JSON对象,然后使用JSON字符串的漂亮打印将其转换回字符串。
其他回答
根据彭彭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不支持控制台中的%转义。奇怪的也许这在未来会奏效。
干杯
出于调试目的,我使用:
console.debug("%o", data);
https://getfirebug.com/wiki/index.php/Console_APIhttps://developer.mozilla.org/en-US/docs/DOM/console
您可以使用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})})”
1行代码(无颜色)中的快速易读JSON输出:
document.documentElement.innerHTML='<pre>'+JSON.stringify(obj, null, 2)+'</pre>';
Douglas Crockford的JavaScript库中的JSON将通过stringify方法打印JSON。
您可能还发现这个老问题的答案很有用:如何在(unix)shell脚本中漂亮地打印JSON?