使用JavaScript漂亮打印JSON

我如何以易于阅读的（人类读者）格式显示JSON？我主要寻找缩进和空格，甚至可能有颜色/font-style/等。

1585426 次浏览
小开

我使用JSONViewChrome扩展（它和它得到的一样漂亮：）：

编辑：添加jsonreport.js

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

您可以阅读有关新的JavaScript HTML5报告格式格式的更多信息。

小开

Douglas Crockford在JavaScript库中的JSON将通过stringify方法漂亮地打印JSON。

你可能也会发现这个老问题的答案很有用：如何在（unix）外壳脚本中漂亮地打印JSON？

小开
最佳答案

漂亮的打印是在#0中本地实现的.第三个参数启用漂亮的打印并设置要使用的行间距：

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

或下面提供的完整片段：

function output(inp) {document.body.appendChild(document.createElement('pre')).innerHTML = inp;}
function 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, 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>';});}
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; }

小开

为了调试目的，我使用：

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

如果你有一个想要漂亮打印的对象，用户Pumbaa80的答案很好。如果你从一个有效的JSON字符串开始，你想漂亮打印，你需要先把它转换成一个对象：

var jsonString = '{"some":"json"}';var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);

这将从字符串构建一个JSON对象，然后使用JSON stringify的漂亮打印将其转换回字符串。

小开

根据Pumbaa80的回答，我修改了代码，使用console.log颜色（肯定是Chrome）而不是超文本标记语言。可以在控制台内看到输出。您可以编辑函数内的_variables添加更多样式。

function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}
vararr = [],_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在控制台中不支持%转义。奇怪…也许这将来会起作用。

干杯！

在此处输入图片描述

小开

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

我也将非常长的regex拆分为其组成部分。

render_json = (data) -># wraps JSON data in span elements so that syntax highlighting may be# applied. Should be placed in a `whitespace: pre` contextif 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这里上的上下文代码

小开

对Ruby的其他漂亮打印机不满意，我编写了自己的（NeatJSON）然后将其移植到JavaScript，包括一个免费的在线格式化程序。该代码在MIT许可下是免费的（相当宽松）。

特点（全部可选）：

  • 设置行宽并以一种方式包装，当对象和数组合适时将它们保持在同一行上，当它们不合适时，每行包装一个值。
  • 排序对象键，如果你喜欢。
  • 对齐对象键（对齐冒号）。
  • 将浮点数格式化为特定的小数位数，而不会弄乱整数。
  • “短”包装模式将打开和关闭括号/大括号放在与值相同的行上，提供一些人喜欢的格式。
  • 对数组和对象、括号之间、冒号和逗号之前/之后的行间距进行精细控制。
  • 功能可用于Web浏览器和Node.js.

我将在这里复制源代码，以便这不仅仅是指向库的链接，但我鼓励您转到github项目页面，因为它将保持最新，而下面的代码不会。

(function(exports){exports.neatJSON = neatJSON;
function neatJSON(value,opts){opts = opts || {}if (!('wrap'          in opts)) opts.wrap = 80;if (opts.wrap==true) opts.wrap = -1;if (!('indent'        in opts)) opts.indent = '  ';if (!('arrayPadding'  in opts)) opts.arrayPadding  = ('padding' in opts) ? opts.padding : 0;if (!('objectPadding' in opts)) opts.objectPadding = ('padding' in opts) ? opts.padding : 0;if (!('afterComma'    in opts)) opts.afterComma    = ('aroundComma' in opts) ? opts.aroundComma : 0;if (!('beforeComma'   in opts)) opts.beforeComma   = ('aroundComma' in opts) ? opts.aroundComma : 0;if (!('afterColon'    in opts)) opts.afterColon    = ('aroundColon' in opts) ? opts.aroundColon : 0;if (!('beforeColon'   in opts)) opts.beforeColon   = ('aroundColon' in opts) ? opts.aroundColon : 0;
var apad  = repeat(' ',opts.arrayPadding),opad  = repeat(' ',opts.objectPadding),comma = repeat(' ',opts.beforeComma)+','+repeat(' ',opts.afterComma),colon = repeat(' ',opts.beforeColon)+':'+repeat(' ',opts.afterColon);
return build(value,'');
function build(o,indent){if (o===null || o===undefined) return indent+'null';else{switch(o.constructor){case Number:var isFloat = (o === +o && o !== (o|0));return indent + ((isFloat && ('decimals' in opts)) ? o.toFixed(opts.decimals) : (o+''));
case Array:var pieces  = o.map(function(v){ return build(v,'') });var oneLine = indent+'['+apad+pieces.join(comma)+apad+']';if (opts.wrap===false || oneLine.length<=opts.wrap) return oneLine;if (opts.short){var indent2 = indent+' '+apad;pieces = o.map(function(v){ return build(v,indent2) });pieces[0] = pieces[0].replace(indent2,indent+'['+apad);pieces[pieces.length-1] = pieces[pieces.length-1]+apad+']';return pieces.join(',\n');}else{var indent2 = indent+opts.indent;return indent+'[\n'+o.map(function(v){ return build(v,indent2) }).join(',\n')+'\n'+indent+']';}
case Object:var keyvals=[],i=0;for (var k in o) keyvals[i++] = [JSON.stringify(k), build(o[k],'')];if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });keyvals = keyvals.map(function(kv){ return kv.join(colon) }).join(comma);var oneLine = indent+"{"+opad+keyvals+opad+"}";if (opts.wrap===false || oneLine.length<opts.wrap) return oneLine;if (opts.short){var keyvals=[],i=0;for (var k in o) keyvals[i++] = [indent+' '+opad+JSON.stringify(k),o[k]];if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });keyvals[0][0] = keyvals[0][0].replace(indent+' ',indent+'{');if (opts.aligned){var longest = 0;for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;var padding = repeat(' ',longest);for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);}for (var i=keyvals.length;i--;){var k=keyvals[i][0], v=keyvals[i][1];var indent2 = repeat(' ',(k+colon).length);var oneLine = k+colon+build(v,'');keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));}return keyvals.join(',\n') + opad + '}';}else{var keyvals=[],i=0;for (var k in o) keyvals[i++] = [indent+opts.indent+JSON.stringify(k),o[k]];if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });if (opts.aligned){var longest = 0;for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;var padding = repeat(' ',longest);for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);}var indent2 = indent+opts.indent;for (var i=keyvals.length;i--;){var k=keyvals[i][0], v=keyvals[i][1];var oneLine = k+colon+build(v,'');keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));}return indent+'{\n'+keyvals.join(',\n')+'\n'+indent+'}'}
default:return indent+JSON.stringify(o);}}}
function repeat(str,times){ // http://stackoverflow.com/a/17800645/405017var result = '';while(true){if (times & 1) result += str;times >>= 1;if (times) str += str;else break;}return result;}function padRight(pad, str){return (str + pad).substring(0, pad.length);}}neatJSON.version = "0.5";
})(typeof exports === 'undefined' ? this : exports);
小开

谢谢大家！基于前面的答案，这里是另一个提供自定义替换规则作为参数的变体方法：

 renderJSON : function(json, rr, code, pre){if (typeof json !== 'string') {json = JSON.stringify(json, undefined, '\t');}var rules = {def : 'color:black;',defKey : function(match){return '<strong>' + match + '</strong>';},types : [{name : 'True',regex : /true/,type : 'boolean',style : 'color:lightgreen;'},
{name : 'False',regex : /false/,type : 'boolean',style : 'color:lightred;'},
{name : 'Unicode',regex : /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/,type : 'string',style : 'color:green;'},
{name : 'Null',regex : /null/,type : 'nil',style : 'color:magenta;'},
{name : 'Number',regex : /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/,type : 'number',style : 'color:darkorange;'},
{name : 'Whitespace',regex : /\s+/,type : 'whitespace',style : function(match){return '&nbsp';}}
],
keys : [{name : 'Testkey',regex : /("testkey")/,type : 'key',style : function(match){return '<h1>' + match + '</h1>';}}],
punctuation : {name : 'Punctuation',regex : /([\,\.\}\{\[\]])/,type : 'punctuation',style : function(match){return '<p>________</p>';}}
};
if('undefined' !== typeof jQuery){rules = $.extend(rules, ('object' === typeof rr) ? rr : {});}else{for(var k in rr ){rules[k] = rr[k];}}var str = json.replace(/([\,\.\}\{\[\]]|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var i = 0, p;if (rules.punctuation.regex.test(match)) {if('string' === typeof rules.punctuation.style){return '<span style="'+ rules.punctuation.style + '">' + match + '</span>';}else if('function' === typeof rules.punctuation.style){return rules.punctuation.style(match);} else{return match;}}
if (/^"/.test(match)) {if (/:$/.test(match)) {for(i=0;i<rules.keys.length;i++){p = rules.keys[i];if (p.regex.test(match)) {if('string' === typeof p.style){return '<span style="'+ p.style + '">' + match + '</span>';}else if('function' === typeof p.style){return p.style(match);} else{return match;}}}return ('function'===typeof rules.defKey) ? rules.defKey(match) : '<span style="'+ rules.defKey + '">' + match + '</span>';} else {return ('function'===typeof rules.def) ? rules.def(match) : '<span style="'+ rules.def + '">' + match + '</span>';}} else {for(i=0;i<rules.types.length;i++){p = rules.types[i];if (p.regex.test(match)) {if('string' === typeof p.style){return '<span style="'+ p.style + '">' + match + '</span>';}else if('function' === typeof p.style){return p.style(match);} else{return match;}}}
}
});
if(true === pre)str = '<pre>' + str + '</pre>';if(true === code)str = '<code>' + str + '</code>';return str;}
小开

您可以使用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(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"

小开

这个不错：

https://github.com/mafintosh/json-markup从mafintosh

const jsonMarkup = require('json-markup')const html = jsonMarkup({hello:'world'})document.querySelector('#myElem').innerHTML = html

超文本标记语言

<link ref="stylesheet" href="style.css"><div id="myElem></div>

示例样式表可以在这里找到

https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css
小开 
var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };
document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

在超文本标记语言显示的情况下，您应该添加一个平衡表<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", "countryCode": "FRA",  "countryLabel": "France" };
document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);
document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
div { float:left; clear:both; margin: 1em 0; }
<div id="result-before"></div><div id="result-after"></div>

小开

它工作得很好： 

console.table()

阅读更多：https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

小开

如果您需要在文本区域中工作，则接受的解决方案将不起作用。

<textarea id='textarea'></textarea>

$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true)); 

function formatJSON(json,textarea) {var nl;if(textarea) {nl = "&#13;&#10;";} else {nl = "<br>";}var tab = "&#160;&#160;&#160;&#160;";var ret = "";var numquotes = 0;var betweenquotes = false;var firstquote = false;for (var i = 0; i < json.length; i++) {var c = json[i];if(c == '"') {numquotes ++;if((numquotes + 2) % 2 == 1) {betweenquotes = true;} else {betweenquotes = false;}if((numquotes + 3) % 4 == 0) {firstquote = true;} else {firstquote = false;}}
if(c == '[' && !betweenquotes) {ret += c;ret += nl;continue;}if(c == '{' && !betweenquotes) {ret += tab;ret += c;ret += nl;continue;}if(c == '"' && firstquote) {ret += tab + tab;ret += c;continue;} else if (c == '"' && !firstquote) {ret += c;continue;}if(c == ',' && !betweenquotes) {ret += c;ret += nl;continue;}if(c == '}' && !betweenquotes) {ret += nl;ret += tab;ret += c;continue;}if(c == ']' && !betweenquotes) {ret += nl;ret += c;continue;}ret += c;} // i loopreturn ret;}
小开

更好的方法。

在JavaScript中校验JSON数组

JSON.stringify(jsonobj,null,'\t')
小开

如果您正在寻找一个不错的库来美化网页上的json…

Prism.js相当不错。

http://prismjs.com/

我发现使用JSON.stringify（obj， untex，2）来获得缩进，然后使用棱镜添加主题是一个很好的方法。

如果您通过ajax调用加载JSON，那么您可以运行Prism的实用程序方法之一来美化

例如：

Prism.highlightAll()
小开

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

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}}*/
小开

这是一个用React编写的简单JSON格式/颜色组件：

const HighlightedJSON = ({ json }: Object) => {const highlightedJSON = jsonObj =>Object.keys(jsonObj).map(key => {const value = jsonObj[key];let valueType = typeof value;const isSimpleValue =["string", "number", "boolean"].includes(valueType) || !value;if (isSimpleValue && valueType === "object") {valueType = "null";}return (<div key={key} className="line"><span className="key">{key}:</span>{isSimpleValue ? (<span className={valueType}>{`${value}`}</span>) : (highlightedJSON(value))}</div>);});return <div className="json">{highlightedJSON(json)}</div>;};

看到它在这个CodePen中工作：https://codepen.io/benshope/pen/BxVpjo

希望有帮助！

小开

为调试目的显示对象的最简单方法：

console.log("data",data) // lets you unfold the object manually

如果您想在DOM中显示对象，您应该考虑它可能包含将被解释为超文本标记语言的字符串。

var s = JSON.stringify(data,null,2) // formatvar e = new Option(s).innerHTML // escapedocument.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display
小开

您可以使用JSON.stringify(your object, null, 2)第二个参数可以用作以key和Val为参数的替换函数。如果你想修改JSON对象中的某些内容，可以使用它。

更多参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

小开

这是user123444555621的超棒超文本标记语言，适用于终端。方便调试节点脚本：

function prettyJ(json) {if (typeof json !== 'string') {json = JSON.stringify(json, undefined, 2);}return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,function (match) {let cls = "\x1b[36m";if (/^"/.test(match)) {if (/:$/.test(match)) {cls = "\x1b[34m";} else {cls = "\x1b[32m";}} else if (/true|false/.test(match)) {cls = "\x1b[35m";} else if (/null/.test(match)) {cls = "\x1b[31m";}return cls + match + "\x1b[0m";});}

用法：

// thing = any json OR string of jsonprettyJ(thing);
小开

找不到任何对控制台有良好语法突出显示的解决方案，所以这是我的2p

安装并添加cli-突出显示依赖

npm install cli-highlight --save

全局定义logjson

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

使用

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

输出

小开 
<!-- 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>
小开

要在HTML中使用Bootstrap突出显示和美化它：

function prettifyJson(json, prettify) {if (typeof json !== 'string') {if (prettify) {json = JSON.stringify(json, undefined, 4);} else {json = JSON.stringify(json);}}return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,function(match) {let cls = "<span>";if (/^"/.test(match)) {if (/:$/.test(match)) {cls = "<span class='text-danger'>";} else {cls = "<span>";}} else if (/true|false/.test(match)) {cls = "<span class='text-primary'>";} else if (/null/.test(match)) {cls = "<span class='text-info'>";}return cls + match + "</span>";});}
小开

我想在这里展示我的jsonAnalyze方法，它做了一个仅限JSON结构的漂亮打印，但在某些情况下，打印整个JSON可能更有用。

假设你有一个像这样的复杂JSON：

let theJson = {'username': 'elen','email': 'elen@test.com','state': 'married','profiles': [{'name': 'elenLove', 'job': 'actor' },{'name': 'elenDoe', 'job': 'spy'}],'hobbies': ['run', 'movies'],'status': {'home': {'ownsHome': true,'addresses': [{'town': 'Mexico', 'address': '123 mexicoStr'},{'town': 'Atlanta', 'address': '4B atlanta 45-48'},]},'car': {'ownsCar': true,'cars': [{'brand': 'Nissan', 'plate': 'TOKY-114', 'prevOwnersIDs': ['4532354531', '3454655344', '5566753422']},{'brand': 'Benz', 'plate': 'ELEN-1225', 'prevOwnersIDs': ['4531124531', '97864655344', '887666753422']}]}},'active': true,'employed': false,};

然后该方法将返回这样的结构：

usernameemailstateprofiles[]profiles[].nameprofiles[].jobhobbies[]status{}status{}.home{}status{}.home{}.ownsHomestatus{}.home{}.addresses[]status{}.home{}.addresses[].townstatus{}.home{}.addresses[].addressstatus{}.car{}status{}.car{}.ownsCarstatus{}.car{}.cars[]status{}.car{}.cars[].brandstatus{}.car{}.cars[].platestatus{}.car{}.cars[].prevOwnersIDs[]activeemployed

这是jsonAnalyze()代码：

function jsonAnalyze(obj) {let arr = [];analyzeJson(obj, null, arr);return logBeautifiedDotNotation(arr);
function analyzeJson(obj, parentStr, outArr) {let opt;if (!outArr) {return "no output array given"}for (let prop in obj) {opt = parentStr ? parentStr + '.' + prop : prop;if (Array.isArray(obj[prop]) && obj[prop] !== null) {let arr = obj[prop];if ((Array.isArray(arr[0]) || typeof arr[0] == "object") && arr[0] != null) {outArr.push(opt + '[]');analyzeJson(arr[0], opt + '[]', outArr);} else {outArr.push(opt + '[]');}} else if (typeof obj[prop] == "object" && obj[prop] !== null) {outArr.push(opt + '{}');analyzeJson(obj[prop], opt + '{}', outArr);} else {if (obj.hasOwnProperty(prop) && typeof obj[prop] != 'function') {outArr.push(opt);}}}}
function logBeautifiedDotNotation(arr) {retStr = '';arr.map(function (item) {let dotsAmount = item.split(".").length - 1;let dotsString = Array(dotsAmount + 1).join('    ');retStr += dotsString + item + '\n';console.log(dotsString + item)});return retStr;}}
jsonAnalyze(theJson);
小开

基于@user123444555621，只是稍微现代一点。

const clsMap = [[/^".*:$/, "key"],[/^"/, "string"],[/true|false/, "boolean"],[/null/, "key"],[/.*/, "number"],]
const syntaxHighlight = obj => JSON.stringify(obj, null, 4).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span class="${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

您还可以在js中指定颜色（不需要CSS）

const clsMap = [[/^".*:$/, "red"],[/^"/, "green"],[/true|false/, "blue"],[/null/, "magenta"],[/.*/, "darkorange"],]
const syntaxHighlight = obj => JSON.stringify(obj, null, 4).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

和一个更少regex的版本

const clsMap = [[match => match.startsWith('"') && match.endsWith(':'), "red"],[match => match.startsWith('"'), "green"],[match => match === "true" || match === "false" , "blue"],[match => match === "null", "magenta"],[() => true, "darkorange"],];    
const syntaxHighlight = obj => JSON.stringify(obj, null, 4).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([fn]) => fn(match))[1]}">${match}</span>`);
小开

这是给Laravel的，CodeigniterHTML：<pre class="jsonPre"> </pre>

Controller：从控制器返回JSON值，就像

return json_encode($data, JSON_PRETTY_PRINT);

在脚本中：<script> $('.jsonPre').html(result); </script>

结果将是

结果将是

小开

如果您使用的是ES5，只需调用JSON.stringify：

  • 第二个参数：替换；设置为空，
  • 第三个参数：空间；使用选项卡。
JSON.stringify(anObject, null, '\t');

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

小开

快速漂亮的人类可读的JSON输出在1行代码（没有颜色）：

document.documentElement.innerHTML='<pre>'+JSON.stringify(obj, null, 2)+'</pre>';
小开

我想你正在寻找这样的东西：

JSON.stringify(obj, null, '\t');

这个“漂亮打印”你的JSON字符串，使用一个选项卡进行缩进。

如果您更喜欢使用空格而不是制表符，您还可以使用一个数字来表示您想要的空格数：

JSON.stringify(obj, null, 2);

提交答案