使用JavaScript美化JSON格式

前言

在前端开发中，我们经常需要处理JSON数据。然而，默认的JSON格式通常难以直接阅读，尤其是在数据量较大的情况下。因此，美化（pretty-print）JSON数据，使其更加清晰和易读，成为了一项颇为重要的任务。本文将介绍几种使用JavaScript美化JSON的方法，包括添加缩进、空格以及语法高亮显示等技巧。

使用 `JSON.stringify()` 美化JSON

美化JSON最直接的方法是使用JavaScript内置的JSON.stringify()函数。该函数提供了一个参数，允许我们指定缩进级别，从而使输出的JSON变得更具可读性。

var obj = {
  name: "Alice",
  age: 25,
  city: "Wonderland"
};

var prettyJSON = JSON.stringify(obj, null, 2); // 使用2个空格的缩进
console.log(prettyJSON);

上面的代码将会输出如下格式的JSON字符串：

{
  "name": "Alice",
  "age": 25,
  "city": "Wonderland"
}

进一步美化：添加语法高亮

如果你需要在网页上展示JSON，并希望添加语法高亮，可以使用如下的正则表达式方法来实现。这段代码将JSON字符串中不同行的值分别包裹在带有不同CSS类的<span>标签中，从而实现高亮显示。

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 json = { name: "Alice", age: 25, city: "Wonderland" };
document.body.innerHTML = '<pre>' + syntaxHighlight(json) + '</pre>';

这段代码将JSON字符串格式化并适用CSS类进行高亮显示。你可以通过CSS添加如下样式来展示高亮效果：

.key { color: red; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }

控制台中的彩色输出

在实际开发中，我们有时需要在控制台中查看格式化的JSON数据。可以使用以下函数在支持彩色输出的控制台（如Chrome）中展示高亮效果：

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

总结

通过本文的介绍，我们学习到了如何使用JavaScript美化JSON字符串，从基本的缩进和空格处理，到更高级的语法高亮显示。不管是直接在网页中展示，还是在浏览器控制台中查看美化后的JSON数据，这些方法都能极大地提升JSON数据的可读性和调试效率。

前言

使用 JSON.stringify() 美化JSON

进一步美化：添加语法高亮

控制台中的彩色输出

总结

使用 `JSON.stringify()` 美化JSON