JavaScript で JSON をきれいに印刷するにはどうすればよいですか?

JavaScript を使用したきれいに印刷された JSON

JSON データを人間が読める形式に変換することは、その構造をデバッグして理解するために重要です。 JavaScript では、「pretty-printing」JSON は JSON.stringify() メソッドを通じてネイティブにサポートされています。

Native Pretty-Printing

JSON.stringify() 関数は、変換する JSON オブジェクト、置換関数 (オプション)、および間隔レベル (オプション) の 3 つの引数を取ります。間隔を指定するには、3 番目の引数として正の整数を渡します。例:

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 中国語 Web サイトの他の関連記事を参照してください。