使用JavaScript打印JSON？

我如何在易于阅读的格式（针对读者）中显示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, '&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

或下面提供的完整摘录：

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function 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, 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>';
    });
}

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

---

用户Pumbaa80的答案很好，如果你有一个你想要的漂亮的对象 。 如果您从要打印的有效JSON 字符串开始，则需要先将其转换为对象：

var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);  

这将从字符串中构建JSON对象，然后使用JSON stringify的漂亮打印将其转换回字符串。

---

基于Pumbaa80的回答，我修改了代码以使用console.log颜色（肯定在Chrome上工作），而不是HTML。 输出可以在控制台中看到。 您可以编辑函数内的_variables，添加更多样式。

function JSONstringify(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 't');
    }

    var 
        arr = [],
        _string = 'color:green',
        _number = 'color:darkorange',
        _boolean = 'color:blue',
        _null = 'color:magenta',
        _key = 'color:red';

    json = json.replace(/("(u[a-zA-Z0-9]{4}|[^u]|[^"])*"(s*:)?|b(true|false|null)b|-?d+(?:.d*)?(?:[eE][+-]?d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

以下是您可以使用的书签：

javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, 't');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(u[a-zA-Z0-9]{4}|[^u]|[^"])*"(s*:)?|b(true|false|null)b|-?d+(?:.d*)?(?:[eE][+-]?d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0);

用法：

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);

编辑：我只是试图在变量声明之后用此行转义％符号：

json = json.replace(/%/g, '%%');

但我发现Chrome不支持在控制台中转义％。 奇怪......也许这将在未来发挥作用。

干杯!

链接地址: http://www.djcxy.com/p/131.html

上一篇: print JSON using JavaScript?

下一篇: Why does Google prepend while(1); to their JSON responses?