我如何以易于阅读(供人类阅读)的格式显示JSON?我主要寻找缩进和空白,甚至是颜色/字体样式等。
当前回答
这很好:
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>
样式表示例可在此处找到
https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css
其他回答
我使用JSONView Chrome扩展插件(它非常漂亮:):
编辑:添加了jsonreport.js
我还发布了一个在线独立的JSON漂亮打印查看器jsonreport.js,它提供了一个可读的HTML5报告,可以用来查看任何JSON数据。
您可以在新的JavaScript HTML5报告格式中阅读更多关于该格式的信息。
Douglas Crockford的JavaScript库中的JSON将通过stringify方法打印JSON。
您可能还发现这个老问题的答案很有用:如何在(unix)shell脚本中漂亮地打印JSON?
更好的方法。
用Javascript美化JSON数组
JSON.stringify(jsonobj,null,'\t')
我想你在找这样的东西:
JSON.stringify(obj, null, '\t');
这“漂亮地打印”了JSON字符串,使用制表符进行缩进。
如果您喜欢使用空格而不是制表符,也可以使用数字表示您想要的空格数:
JSON.stringify(obj, null, 2);
要使用Bootstrap在HTML中突出显示和美化它,请执行以下操作:
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>";
}
);
}