如何在 JavaScript 中漂亮打印 JSON？

使用 JavaScript 漂亮打印 JSON

将 JSON 数据转换为人类可读的格式对于调试和理解其结构至关重要。在 JavaScript 中，通过 JSON.stringify() 方法原生支持“漂亮打印”JSON。

原生漂亮打印

JSON.stringify() 函数接受三个参数：要转换的 JSON 对象、替换函数（可选）和间距级别（可选）。要指定间距，请传递一个正整数作为第三个参数。例如：

var obj = { foo: 'bar', baz: [1, 2, 3] };
var json = JSON.stringify(obj, null, 2);

这将产生：

"{
  "foo": "bar",
  "baz": [
    1,
    2,
    3
  ]
}"

语法突出显示

为了获得更清晰的视觉效果，您可以使用正则表达式将语法突出显示应用于 JSON 字符串。例如：

function syntaxHighlight(json) {
  // Escape HTML characters
  json = json.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '>');
  
  // Highlight different types using span tags
  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>`;
  });
}

此函数会将关键元素替换为不同的颜色和样式，使 JSON 结构更具可读性。

示例

这是一个结合了本机漂亮打印和语法突出显示的示例：

// Pretty-print the JSON object
var json = JSON.stringify(obj, null, 2);

// Highlight the JSON string
var highlighted = syntaxHighlight(json);

// Display the highlighted JSON string in the browser console
console.log(highlighted);

以上是如何在 JavaScript 中漂亮打印 JSON？的详细内容。更多信息请关注PHP中文网其他相关文章！