JS 如何漂亮地打印 JSON

在JavaScript中，您可以使用JSON.stringify()方法来转换JSON对象为其字符串形式，这个方法还可以让我们以非常易读的格式打印JSON数据。JSON.stringify()接受三个参数：要序列化的对象，一个可选的替换函数，以及一个可选的数字或字符串来控制缩进。

以下是一个例子，展示了如何使用JSON.stringify()方法来以漂亮的格式打印JSON对象：

javascript
// 假设我们有如下的JSON对象
const myObject = {
  name: "John",
  age: 30,
  cars: ["Ford", "BMW", "Fiat"]
};

// 第三个参数控制缩进，数字2表示每一层缩进两个空格
const prettyJson = JSON.stringify(myObject, null, 2);

console.log(prettyJson);

输出将会是：

shell
{
  "name": "John",
  "age": 30,
  "cars": [
    "Ford",
    "BMW",
    "Fiat"
  ]
}

在这个例子中，我们没有使用替换函数（JSON.stringify()的第二个参数），但是它也可以用来过滤或者转换对象中的值。如果你想要自定义某些属性的显示或者排除对象中的一些属性不被打印，可以提供这个函数。

例如，如果我们只想打印cars数组中的第二个元素，我们可以这样做：

javascript
function replacer(key, value) {
  // 如果键是'cars'，只返回数组的第二个元素
  if(key === "cars") {
    return [value[1]];
  }
  return value;
}

// 使用自定义替换函数和缩进
const prettyJson = JSON.stringify(myObject, replacer, 2);

console.log(prettyJson);

输出将会是：

shell
{
  "name": "John",
  "age": 30,
  "cars": [
    "BMW"
  ]
}

这个替换函数只会让cars数组中的"BWM"被打印出来。这种方法在处理大型对象或者需要从输出中过滤掉敏感信息时非常有用。

漂亮打印是在JSON.stringify().第三个参数启用漂亮的打印并设置要使用的间距：

shell
var str = JSON.stringify(obj, null, 2); // spacing level = 2

如果您需要语法突出显示，您可以使用一些正则表达式魔法，如下所示：

shell
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

或者下面提供的完整片段：

显示代码片段

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

Run code snippetHide results

Expand snippet

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

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

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

更好的方法。

在 Javascript 中美化 JSON 数组

shell
JSON.stringify(jsonobj,null,'\t')

我想你正在寻找这样的东西：

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

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

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

shell
JSON.stringify(obj, null, 2);

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

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

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

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

例子：

显示代码片段

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

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

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

div { float:left; clear:both; margin: 1em 0; }

<div id="result-before"></div>
<div id="result-after"></div>

Run code snippetHide results

Expand snippet