我怎样才能漂亮的打印使用JavaScript的JSON？

我怎样才能显示JSON在一个易于阅读（为读者）格式？ 我正在寻找缩进和空白，甚至可能是颜色/ font-styles /等。

Answer 1

漂亮打印在JSON.stringify()本地实现 。 第三个参数启用漂亮的打印并设置要使用的间距：

 var str = JSON.stringify(obj, null, 2); // spacing level = 2 

如果你需要语法突出显示，你可能会使用一些正则expression式魔术：

 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; } 

Answer 2

用户Pumbaa80的答案是伟大的，如果你有一个对象，你想漂亮打印。 如果您从要打印的有效JSON string开始，则需要先将其转换为对象：

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

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

Answer 3

我使用JSONView Chrome扩展 （它是如此漂亮:)：

编辑：添加jsonreport.js

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

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

Answer 4

基于Pumbaa80的答案，我已经修改了代码，以使用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); 

编辑：我只是试图在variables声明之后用这一行转义％符号：

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

但是我发现Chrome在控制台中不支持％转义。 奇怪…也许这将在未来工作。

干杯!

Answer 5

您可以使用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})}))"

Answer 6

为了debugging目的，我使用：

 console.debug（“％o”，data）;

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

Answer 7

 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>" 

Answer 8

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

function（全部可选）：

• 设置一个线宽，并以适合的方式将对象和数组保持在同一行上，并在每行不包含一行时包装一行。
• 如果你喜欢sorting对象键。
• alignment对象键（排列冒号）。
• 将浮点数编码为特定的小数位数，而不会搞乱整数。
• “短”包装模式将开放和closures括号/大括号放在与值相同的行上，提供了一些更喜欢的格式。
• 对数组和对象之间，括号之间，冒号前和之后的逗号进行粒度控制。
• 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/405017 var 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); 

Answer 9

非常感谢@all！ 根据以前的答案，下面是另一种提供自定义replace规则作为参数的变体方法：

  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; } 

Answer 10

Douglas Crockford的JavaScript库中的JSON将通过stringify方法很好地打印JSON。

你也可以find这个较旧的问题的答案有用： 我怎样才能在（Unix）shell脚本漂亮打印JSON？

Answer 11

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

我把真正长的正则expression式分解成它的组成部分。

 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的上下文中

Answer 12

它运作良好：

 console.table() 

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

Answer 13

更好的方法。

在Javascript中美化JSON数组

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

Answer 14

我build议使用HighlightJS 。 它使用与接受的答案相同的原则 ，但也适用于许多其他语言 ，并且有许多预定义的配色scheme 。 如果使用RequireJS ，则可以使用生成兼容模块

 python3 tools/build.py -tamd json xml <specify other language here> 

一代依靠Python3和Java。 添加-n生成一个非缩小版本。

Answer 15

这很好：

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

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

HTML

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

样例样式表可以在这里find

 https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css 

Answer 16

如果你需要这个工作在textarea接受的解决scheme将无法正常工作。

<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 loop return ret; } 

Answer 17

如果你使用net.sf.json，你可以打印如下（使用4空格缩进）：

 JSONObject work = JSONObject.fromObject("{\"hi\":\"there\",\"more\":\"stuff\"}"); log.info("WORK="+work.toString(4)); 

Answer 18

使用Newtonsoft.Json DLL。 这在IE和Chrome中工作正常

把这个代码放在你的剃刀视图中

  if (Model.YourJsonSting!= null) { <pre> <code style="display:block;white-space:pre-wrap"> @JToken.Parse(Model.YourJsonSting).ToString(Formatting.Indented) </code> </pre> }