如果您正在寻找一个漂亮的库来美化网页上的json。。。

Prism.js非常好。

http://prismjs.com/

我发现使用JSON.stringify（obj，undefined，2）获取缩进，然后使用prism添加主题是一个不错的方法。

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

例如：

Prism.highlightAll()

基于@user123444555621，稍显现代。

const clsMap = [
    [/^".*:$/, "key"],
    [/^"/, "string"],
    [/true|false/, "boolean"],
    [/null/, "key"],
    [/.*/, "number"],
]

const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
    .replace(/&/g, '&')
    .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, '&')
    .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>`);

和更少正则表达式的版本

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, '&')
    .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>`);

我想你在找这样的东西：

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

这“漂亮地打印”了JSON字符串，使用制表符进行缩进。

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

JSON.stringify(obj, null, 2);

漂亮的打印是在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, '&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

或以下提供的完整片段：

函数输出（inp）{document.body.appendChild（document.createElement（'pre'））.innerHTML=inp；}函数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，函数（匹配）{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:红色；｝

您可以使用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（newstream.Writeable（｛write:cchunk=>console.dir（json.parse（chunk），｛depth:null，colors:true｝）｝）”

更好的方法。

用Javascript美化JSON数组

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