JavaScript 漂亮列印 JSON

  2. 貼士文章
  3. JavaScript 貼士
  4. JavaScript 漂亮列印 JSON
Valentine Kagwiria 2023年1月30日 2021年4月29日
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