这是给Laravel的，CodeigniterHtml：<pre class=“jsonPre”></pre>

Controller：从控制器返回JSON值，如下所示

返回json_encode（$data，json_PRETTY_PRINT）；

在脚本中：<script>$（'.jsonPre'）.html（结果）</脚本>

结果将是

Douglas Crockford的JavaScript库中的JSON将通过stringify方法打印JSON。

您可能还发现这个老问题的答案很有用：如何在（unix）shell脚本中漂亮地打印JSON？

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

'{\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(obj, null, '\t');

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

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

JSON.stringify(obj, null, 2);

1行代码（无颜色）中的快速易读JSON输出：

document.documentElement.innerHTML='<pre>'+JSON.stringify(obj, null, 2)+'</pre>';

要使用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>";
        }
    );
}