Bagaimanakah saya boleh mencetak JSON dengan cantik dalam JavaScript dan menambah penyerlahan sintaks?

Pretty-Printing JSON dalam JavaScript

Memaparkan JSON dalam format yang boleh dibaca manusia adalah penting untuk memahami dan menyahpepijat data. Dalam JavaScript, ini dicapai melalui fungsi JSON.stringify() asli.

Percetakan Cantik Asli:

Argumen ketiga JSON.stringify() mendayakan pretty -mencetak dan menentukan tahap lekukan. Contohnya:

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

Ini akan mengeluarkan JSON dengan 2 ruang lekukan, menjadikannya lebih mudah dibaca.

Penyertaan Sintaks:

Untuk pemformatan yang lebih terperinci, anda boleh menggunakan ungkapan biasa untuk menyerlahkan elemen yang berbeza dalam JSON rentetan.

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

Fungsi ini menggantikan corak tertentu dengan teg HTML untuk menggunakan gaya seperti warna pada elemen JSON yang berbeza.

Snippet Kod Penuh:

Berikut ialah contoh komprehensif:

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

Skrip ini menghuraikan objek JSON, cantik-mencetaknya dan memaparkannya bersama-sama dengan JSON yang diserlahkan sintaks.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencetak JSON dengan cantik dalam JavaScript dan menambah penyerlahan sintaks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!