JavaScript 漂亮列印 JSON

  2. 貼士文章
  3. JavaScript 貼士
  4. JavaScript 漂亮列印 JSON
Valentine Kagwiria 2023年10月12日
JavaScript JavaScript JSON
  1. 在 JavaScript 中使用 JSON.stringify() 漂亮地列印 JSON
  2. 突出顯示 JSON 語法
  3. 在 JavaScript 中使用 JSON.parse() 漂亮地列印 JSON
  4. 使用 JSON 陣列
JavaScript 漂亮列印 JSON

本文概述瞭如何在 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> 標籤中使用。

相關文章 - JavaScript JSON