这很好：

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

我想在这里展示我的jsonAnalyze方法，它只打印了JSON结构，但在某些情况下，打印整个JSON会更有用。

假设您有这样一个复杂的JSON：

let theJson = {
'username': 'elen',
'email': 'elen@test.com',
'state': 'married',
'profiles': [
    {'name': 'elenLove', 'job': 'actor' },
    {'name': 'elenDoe', 'job': 'spy'}
],
'hobbies': ['run', 'movies'],
'status': {
    'home': { 
        'ownsHome': true,
        'addresses': [
            {'town': 'Mexico', 'address': '123 mexicoStr'},
            {'town': 'Atlanta', 'address': '4B atlanta 45-48'},
        ]
    },
    'car': {
        'ownsCar': true,
        'cars': [
            {'brand': 'Nissan', 'plate': 'TOKY-114', 'prevOwnersIDs': ['4532354531', '3454655344', '5566753422']},
            {'brand': 'Benz', 'plate': 'ELEN-1225', 'prevOwnersIDs': ['4531124531', '97864655344', '887666753422']}
        ]
    }
},
'active': true,
'employed': false,
};

然后该方法将返回如下结构：

username
email
state
profiles[]
    profiles[].name
    profiles[].job
hobbies[]
status{}
    status{}.home{}
        status{}.home{}.ownsHome
        status{}.home{}.addresses[]
            status{}.home{}.addresses[].town
            status{}.home{}.addresses[].address
    status{}.car{}
        status{}.car{}.ownsCar
        status{}.car{}.cars[]
            status{}.car{}.cars[].brand
            status{}.car{}.cars[].plate
            status{}.car{}.cars[].prevOwnersIDs[]
active
employed

这是jsonAnalysis（）代码：

function jsonAnalyze(obj) {
        let arr = [];
        analyzeJson(obj, null, arr);
        return logBeautifiedDotNotation(arr);

    function analyzeJson(obj, parentStr, outArr) {
        let opt;
        if (!outArr) {
            return "no output array given"
        }
        for (let prop in obj) {
            opt = parentStr ? parentStr + '.' + prop : prop;
            if (Array.isArray(obj[prop]) && obj[prop] !== null) {
                    let arr = obj[prop];
                if ((Array.isArray(arr[0]) || typeof arr[0] == "object") && arr[0] != null) {                        
                    outArr.push(opt + '[]');
                    analyzeJson(arr[0], opt + '[]', outArr);
                } else {
                    outArr.push(opt + '[]');
                }
            } else if (typeof obj[prop] == "object" && obj[prop] !== null) {
                    outArr.push(opt + '{}');
                    analyzeJson(obj[prop], opt + '{}', outArr);
            } else {
                if (obj.hasOwnProperty(prop) && typeof obj[prop] != 'function') {
                    outArr.push(opt);
                }
            }
        }
    }

    function logBeautifiedDotNotation(arr) {
        retStr = '';
        arr.map(function (item) {
            let dotsAmount = item.split(".").length - 1;
            let dotsString = Array(dotsAmount + 1).join('    ');
            retStr += dotsString + item + '\n';
            console.log(dotsString + item)
        });
        return retStr;
    }
}

jsonAnalyze(theJson);

您可以使用JSON.stringify（您的对象，null，2）第二个参数可以用作替换函数，将key和Val作为参数。如果您想修改JSON对象中的某些内容，可以使用此函数。

更多参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

这里有一些东西来修饰这个老掉牙但很好的问题。如果您想将格式化的对象转储到控制台，但它仍像一团包裹的乱麻一样转储，隐藏字符如下？？？

'{\n    "_id": "630577bba145ff4f1",\n    "role": "user"}'

但你想要这种可爱？？：

{
    "_id": "630557672d877bba145ff4f1",
    "role": "user"
}

诀窍是将JSON.stringify（）包装在console.log（）语句中。如果你讨厌打字，尝试构建代码段来完成繁重的工作。。。

如果您正在处理大型对象，这非常有用。

在浏览器开发工具中的“代码段”部分添加一个代码段，如下所示（更多…）：

let o = <object to print>
console.log(JSON.stringify(o, null, 4))
console.log(o)

然后简单地替换为对象（可以从当前上下文中获得）并运行代码段。

漂亮的打印是在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:红色；｝

基于@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>`);