迹忆客 专注技术分享

本文概述了如何在 JavaScript 中漂亮地打印 JSON。

在 JavaScript 中使用 JSON.stringify() 漂亮地打印 JSON

JSON.stringify() 参数允许内容以漂亮的方式显示，并允许用户设置适合其可读性的间距。

你可以通过如下设置字符串变量来实现。

var prettyString = JSON.stringify(obj, null, 2);  // spacing level = 1.5

突出显示 JSON 语法

如果需要突出显示 JSON 语法，则需要创建一个函数并包含正则表达式代码。

function prettyString(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 str1 = 'number';
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            str1 = 'key';
          } else {
            str1 = 'string';
          }
        } else if (/true|false/.test(match)) {
          str1 = 'boolean';
        } else if (/null/.test(match)) {
          str1 = 'null';
        }
        return '<span class="' + str1 + '">' + match + '</span>';
      });
}

在 JavaScript 中使用 JSON.parse() 漂亮地打印 JSON

上面的方法使用 json.stringify()，并且在 JSON 对象上效果很好，但在 JSON 字符串上效果不佳。要打印出漂亮的 JSON 字符串，你需要先将其转换为对象。

var string1 = '{"program":"code"}';
var prettyPrint = JSON.stringify(JSON.parse(string1), null, 2);

确保将字符串包装在 HTML 标签 <pre> 和 </pre> 中，以便可以正确显示。

使用 JSON 数组

另外，你可以在 JavaScript 中使用 JSON 数组。它很简单，不需要额外的计算，这可能会使程序变慢，特别是在重复几次时。

例如：

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

这也应在 <pre> 和 </pre> 标签中使用。