JavaScript プリティプリント JSON

Valentine Kagwiria 2023年10月12日
  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