読みやすさと視覚的な魅力を高めるために、JavaScript で JSON をきれいに印刷するにはどうすればよいですか?

JavaScript で JSON をきれいに印刷して読みやすさを向上

JSON データを操作する場合、多くの場合、人間が読みやすいように視覚的に魅力的な方法でデータを表示することが望ましいです。 JavaScript は、JSON.stringify() メソッドを使用してこのニーズに対する解決策を提供します。

きれいに印刷するために JSON.stringify() を使用する

デフォルトでは、JSON.stringify() はコンパクトな文字列を生成しますJSON オブジェクトの表現。ただし、間隔レベルを指定する 3 番目の引数を指定すると、整形印刷を有効にすることができます。

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

これにより、インデントと空白を含む JSON 文字列が生成され、読みやすく理解しやすくなります。

視覚的な魅力を高めるための構文の強調表示

構文などの追加の視覚的な拡張が必要な​​場合強調表示を行うには、正規表現マジックを使用してこれを実現できます。

function syntaxHighlight(json) {
  // Replace special characters for HTML safety
  json = json.replace(/&amp;/g, '&amp;amp;').replace(/</g, '&amp;lt;').replace(/>/g, '&amp;gt;');

  // Add HTML spans with appropriate classes for styling
  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'; // Default class for numbers
    if (/^"/.test(match)) { // String
      if (/:$/.test(match)) { // Key
        cls = 'key';
      } else { // String value
        cls = 'string';
      }
    } else if (/true|false/.test(match)) { // Boolean
      cls = 'boolean';
    } else if (/null/.test(match)) { // Null
      cls = 'null';
    }
    return '<span class="' + cls + '">' + match + '</span>';
  });
}

サンプル コード

これは、整形表示と構文強調表示の両方を示す完全な例です。

// Sample JSON object
var obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] };

// Pretty-print the JSON using `JSON.stringify()`
var str = JSON.stringify(obj, undefined, 4);
output(str);

// Syntax highlight the pretty-printed JSON
output(syntaxHighlight(str));

// Function to append output to the page
function output(inp) {
  document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

このコードは、JSON オブジェクトの視覚的に魅力的な表現を生成し、人間が読みやすく、理解します。

以上が読みやすさと視覚的な魅力を高めるために、JavaScript で JSON をきれいに印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。