使用JavaScript美化打印JSON数据

技术背景

在开发过程中，我们经常需要处理和查看JSON数据。然而，原始的JSON数据通常是紧凑的、无格式的字符串，不易阅读和调试。因此，我们需要对JSON数据进行美化打印，使其具有良好的格式和可读性。

实现步骤

基本的美化打印

JavaScript的JSON.stringify()方法提供了原生的美化打印功能。该方法的第三个参数可以用于设置缩进的空格数或制表符，从而实现美化打印的效果。

var obj = {a: 1, 'b': 'foo', c: [false, 'false', null, 'null', {d: {e: 1.3e5, f: '1.3e5'}}]};
var str = JSON.stringify(obj, null, 2); // 缩进空格数为2
console.log(str);

语法高亮

如果需要对美化后的JSON数据进行语法高亮显示，可以使用正则表达式和HTML标签来实现。

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

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);
var highlightedStr = syntaxHighlight(str);
document.body.innerHTML = '<pre>' + highlightedStr + '</pre>';

从JSON字符串开始美化

如果从一个有效的JSON字符串开始，需要先将其转换为对象，再进行美化打印。

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

核心代码

以下是一个完整的示例，展示了如何使用JSON.stringify()方法进行美化打印，并添加语法高亮效果。

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));

最佳实践

• 使用console.dir()：console.dir()是console.log(util.inspect())的快捷方式，它使用语法高亮、智能缩进，移除键的引号，使输出更加美观。

const object = JSON.parse(jsonString);
console.dir(object, {depth: null, colors: true});

• 使用第三方库：如Prism.js，可以方便地对JSON数据进行语法高亮显示。

// 先使用JSON.stringify()进行美化
var obj = {a: 1, 'b': 'foo'};
var str = JSON.stringify(obj, undefined, 2);
// 将美化后的JSON数据插入到HTML中
document.body.innerHTML = '<pre><code class="language-json">' + str + '</code></pre>';
// 使用Prism.js进行语法高亮
Prism.highlightAll();

常见问题

从JSON字符串开始美化时的错误

如果直接对JSON字符串使用JSON.stringify()进行美化，会得到错误的结果。需要先使用JSON.parse()将其转换为对象，再进行美化。

语法高亮在不同环境中的兼容性

在某些环境中，如控制台，可能无法直接使用HTML标签进行语法高亮。可以使用控制台支持的方式，如使用console.log()的格式化功能。

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);
}

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