本文共 21118 字，大约阅读时间需要 70 分钟。
如何以易于阅读的格式（对人类读者而言）显示？ 我主要是在寻找缩进和空格，甚至可能是颜色/字体样式/等。
出于调试目的，我使用：
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上有效）而不是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不支持在控制台中进行％的转义。 奇怪...也许将来会有用。
干杯!
我今天遇到了@ Pumbaa80的代码问题。 我试图将JSON语法突出显示应用于在视图中渲染的数据，因此我需要为JSON.stringify输出中的所有内容创建DOM节点。
我也将很长的正则表达式拆分为其组成部分。
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上语境
我建议使用 。 它使用与接受的答案相同的原理 ，但也适用于许多其他语言 ，并具有许多预定义的配色方案 。 如果使用 ，则可以使用以下命令生成兼容模块
python3 tools/build.py -tamd json xml
生成依赖于Python3和Java。 添加-n以生成非缩小版本。
对其他漂亮的Ruby打印机不满意，我编写了自己的（ ），然后其中包括 。 该代码在MIT许可下是免费的（非常宽松）。
功能（全部可选）：
我将在此处复制源代码，以便它不仅是指向库的链接，而且我建议您转到 ，因为该将保持最新，而下面的代码则不会。
(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:0 }); keyvals = keyvals.map(function(kv){ return kv.join(colon) }).join(comma); var oneLine = indent+"{"+opad+keyvals+opad+"}"; if (opts.wrap===false || oneLine.length 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: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); 非常感谢@all！ 根据先前的答案，这是另一种提供自定义替换规则作为参数的变体方法：
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 '' + match + ''; }, 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 ' '; } } ], keys : [ { name : 'Testkey', regex : /("testkey")/, type : 'key', style : function(match){ return '' + match + '
'; } } ], punctuation : { name : 'Punctuation', regex : /([\,\.\}\{\[\]])/, type : 'punctuation', style : function(match){ return '________
'; } } }; 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 '' + match + ''; }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 ' + match + ''; }else if('function' === typeof p.style){ return p.style(match); } else{ return match; } } } return ('function'===typeof rules.defKey) ? rules.defKey(match) : ' ' + match + ''; } else { return ('function'===typeof rules.def) ? rules.def(match) : ' ' + match + ''; } } else { for(i=0;i ' + match + ''; }else if('function' === typeof p.style){ return p.style(match); } else{ return match; } } } } }); if(true === pre)str = ' ' + str + '
'; if(true === code)str = ' ' + str + ''; 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})}))"
这很好：
来自mafintosh
const jsonMarkup = require('json-markup')const html = jsonMarkup({hello:'world'})document.querySelector('#myElem').innerHTML = html 的HTML
示例样式表可以在这里找到
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); 如果以HTML显示，则应添加栏杆<pre></pre>
document.getElementById("result-after").innerHTML = ""+JSON.stringify(jsonObj,undefined, 2) +"
" 例：
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 = ""+JSON.stringify(jsonObj,undefined, 2) +"
" div { float:left; clear:both; margin: 1em 0; } 它运作良好：
console.table()
在此处阅读更多信息： :
如果您需要在文本区域中使用此功能，则接受的解决方案将不起作用。
<textarea id='textarea'></textarea>
$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true));
function formatJSON(json,textarea) { var nl; if(textarea) { nl = "
"; } else { nl = ""; } var tab = " "; 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;} 更好的方法。
JSON.stringify(jsonobj,null,'\t')
如果您正在寻找一个漂亮的库来美化网页上的json ...
Prism.js相当不错。
我发现使用JSON.stringify（obj，undefined，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 } }*/ 我使用 （它看起来很漂亮：）：
编辑：添加了jsonreport.js
我还发布了一个在线的独立JSON漂亮打印查看器jsonreport.js，该查看器提供了可阅读的HTML5报告，可用于查看任何JSON数据。
您可以在“ 阅读有关该格式的更多信息。
这是用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 ( {key}: {isSimpleValue ? ( {`${value}`} ) : ( highlightedJSON(value) )} ); }); return {highlightedJSON(json)} ;}; 看到它在此CodePen中工作： ://codepen.io/benshope/pen/BxVpjo
希望有帮助！
Douglas Crockford在JavaScript库中的JSON将通过stringify方法漂亮地打印JSON。
您可能还会发现以下较旧问题的答案很有用：
显示对象以进行调试的最简单方法是：
console.log("data",data) // lets you unfold the object manually 如果要在DOM中显示对象，则应考虑它可能包含将被解释为HTML的字符串。 因此，您需要 ...
var s = JSON.stringify(data,null,2) // formatvar e = new Option(s).innerHTML // escapedocument.body.insertAdjacentHTML('beforeend',''+e+'
') // display 您可以使用JSON.stringify(your object, null, 2)第二个参数可以用作JSON.stringify(your object, null, 2)函数，该函数以key和Val为参数，可以在想要修改JSON对象中的内容时使用。
更多参考： :
这是user123444555621的超棒HTML，适用于终端。 方便调试Node脚本：
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
npm install cli-highlight --save
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"]});
Configuration Parameters
{ { cfgParams }}
使用Bootstrap在HTML突出显示和美化它：
function pretifyJson(json, pretify) { if (typeof json !== 'string') { if(pretify){ 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 = ""; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = ""; } else { cls = ""; } } else if (/true|false/.test(match)) { cls = ""; } else if (/null/.test(match)) { cls = ""; } return cls + match + ""; } );} 如果您使用Vue.js，我建议使用此库：
我做了一个例子：
祝你有美好的一天！
。 第三个参数启用漂亮的打印并设置要使用的间距：
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, '&').replace(//g, '>'); 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 '' + match + ''; });} 在这里查看操作：
或下面提供的完整代码段：
function output(inp) { document.body.appendChild(document.createElement('pre')).innerHTML = inp; } function syntaxHighlight(json) { json = json.replace(/&/g, '&').replace(//g, '>'); 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 '' + match + ''; }); } 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; } 转载地址：http://nxdnb.baihongyu.com/