Bagaimanakah saya boleh meningkatkan kebolehbacaan JSON menggunakan pencetakan cantik dan penyerlahan sintaks?

JSON Pencetakan Cantik untuk Kebolehbacaan Manusia

JSON pencetakan cantik boleh meningkatkan kebolehbacaan dengan memperkenalkan lekukan, ruang putih dan kemungkinan warna atau gaya fon. Berikut ialah dua pendekatan:

Percetakan Cantik Terbina dalam

Fungsi JSON.stringify() JavaScript menyediakan keupayaan pencetakan cantik asli. Lulus hujah ketiga sebagai tahap jarak:

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

Penyertaan Sintaks dengan Ungkapan Biasa

Untuk penyerlahan sintaks, anda boleh menggunakan ungkapan biasa untuk mewarnakan JSON yang berbeza elemen:

function syntaxHighlight(json) {
  json = json.replace(/&amp;/g, '&amp;amp;').replace(/</g, '&amp;lt;').replace(/>/g, '&amp;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 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>';
  });
}

Lengkap Contoh

Berikut ialah coretan penuh yang menunjukkan kedua-dua kaedah:

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
    <pre class="snippet-code-js lang-js prettyprint-override">function output(inp) {
        document.body.appendChild(document.createElement('pre')).innerHTML = inp;
    }

    function syntaxHighlight(json) {
        json = json.replace(/&amp;/g, '&amp;amp;').replace(/</g, '&amp;lt;').replace(/>/g, '&amp;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 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>';
        });
    }

    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));

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }