JavaScript で JSON を整形して構文の強調表示を追加するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で JSON を整形して構文の強調表示を追加するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-19 22:34:11

オリジナル

561 人が閲覧しました

How can I pretty-print JSON in JavaScript and add syntax highlighting?

JavaScript で JSON を美しく印刷する

人間が読める形式で JSON を表示することは、データの理解とデバッグに不可欠です。 JavaScript では、これはネイティブ JSON.stringify() 関数を通じて実現されます。

ネイティブ Pretty-Printing:

JSON.stringify() の 3 番目の引数により、Pretty が有効になります。 -printing でインデントレベルを指定します。例:

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

ログイン後にコピー

これにより、スペース 2 個のインデントを含む JSON が出力され、読みやすくなります。

構文の強調表示:

の場合より複雑な書式設定を行うと、正規表現を使用して JSON 内のさまざまな要素を強調表示できます。 string.

function syntaxHighlight(json) {
  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>';
  });
}

ログイン後にコピー

この関数は、特定のパターンを HTML タグで置き換えて、色などのスタイルをさまざまな JSON 要素に適用します。

完全なコードスニペット:

これは包括的な例です:

function output(inp) {
  document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
  return json.replace(/&amp;/g, '&amp;amp;').replace(/</g, '&amp;lt;').replace(/>/g, '&amp;gt;');
}

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));

ログイン後にコピー

このスクリプトは JSON を解析しますオブジェクトを取得し、それを整形して表示し、構文で強調表示された JSON とともに表示します。

以上がJavaScript で JSON を整形して構文の強調表示を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。