我如何以易于阅读(供人类阅读)的格式显示JSON?我主要寻找缩进和空白,甚至是颜色/字体样式等。
当前回答
漂亮的打印是在JSON.stringify()中本地实现的。第三个参数启用漂亮的打印并设置要使用的间距:
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, '<').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 '<span class="' + cls + '">' + match + '</span>';
});
}
在这里查看实际操作:jsfiddle
或以下提供的完整片段:
函数输出(inp){document.body.appendChild(document.createElement('pre')).innerHTML=inp;}函数syntaxHighlight(json){json=json.replace(/&/g,'&;').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,函数(匹配){var cls=“数字”;if(/^“/.test(匹配)){if(/:$/.test(匹配)){cls=“键”;}其他{cls=“字符串”;}}else if(/true|false/.test(匹配)){cls=“布尔值”;}else if(/null/.test(match)){cls=“null”;}return'<span class=“'+cls+'”>'+match+'</span>';});}var obj={a:1,'b':'o',c:[false,'false',null,'null',{d:{e:1.3e5,f:'1.3e5'}}]};var str=JSON.stringify(obj,未定义,4);输出(str);输出(syntaxHighlight(str));前置{outline:1px实心#ccc;padding:5px;margin:5px;}.string{color:绿色;}.number{color:深橙色;}布尔{color:blue;}.null{color:洋红色;}.key{color:红色;}
其他回答
如果您需要在文本区域中使用此选项,则接受的解决方案将不起作用。
<textarea id='textarea'></textarea>
$(“#textarea”).append(格式JSON(JSON.stringify(jsonobject),true));
function formatJSON(json,textarea) {
var nl;
if(textarea) {
nl = " ";
} else {
nl = "<br>";
}
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;
}
我今天遇到了@Pumbaa80的代码问题。我试图将JSON语法高亮显示应用于我在Mithril视图中呈现的数据,因此我需要为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上的上下文代码
如果您使用的是ES5,只需使用以下命令调用JSON.stringify:
第二个参数:replacer;设置为空,第三个参数:空格;使用选项卡。
JSON.stringify(anObject, null, '\t');
资料来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
用户Pumbaa80的答案很好,如果你有一个想要漂亮打印的对象。如果要从一个有效的JSON字符串开始打印,需要首先将其转换为一个对象:
var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);
这将从字符串构建一个JSON对象,然后使用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 (
<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
希望这有帮助!