这很好：

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

如果您需要在文本区域中使用此选项，则接受的解决方案将不起作用。

<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 = "&#160;&#160;&#160;&#160;";
    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;
}

找不到任何能为控制台提供良好语法高亮显示的解决方案，所以这里是我的2p

安装并添加cli高亮显示依赖项

npm install cli-highlight --save

全局定义logjson

const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
                               highlight( JSON.stringify(obj, null, 4), 
                                          { language: 'json', ignoreIllegals: true } ));

Use

console.logjson({foo: "bar", someArray: ["string1", "string2"]});

我想你在找这样的东西：

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

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

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

JSON.stringify(obj, null, 2);

它工作得很好：

console.table()

在此处阅读更多信息：https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

如果以HTML显示，则应添加应答器<pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

例子：

var jsonObj={“streetLabel”：“Avenue Anatole France”，“city”：“Paris 07”，“postalCode”：“75007”；document.getElementById（“result before”）.innerHTML=JSON.stringfy（jsonObj）；document.getElementById（“resultafter”）.innerHTML=“<pre>”+JSON.stringify（jsonObj，未定义，2）+“</pre>”div｛float:left；clear:both；margin:1em 0；｝<div id=“result before”></div><div id=“result after”></div>