Bagaimanakah saya boleh mencetak cantik JSON dalam JavaScript untuk kebolehbacaan dan daya tarikan visual yang lebih baik?

Cantik-mencetak JSON dalam JavaScript untuk Kebolehbacaan Yang Dipertingkatkan

Apabila bekerja dengan data JSON, selalunya wajar untuk memaparkannya dalam cara yang menarik secara visual untuk kebolehbacaan manusia. JavaScript menyediakan penyelesaian kepada keperluan ini dengan kaedah JSON.stringify().

Menggunakan JSON.stringify() untuk Pretty-printing

Secara lalai, JSON.stringify() menjana rentetan padat perwakilan objek JSON. Walau bagaimanapun, anda boleh mendayakan pencetakan cantik dengan menyediakan hujah ketiga yang menentukan tahap jarak.

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

Ini menjana rentetan JSON dengan lekukan dan ruang putih, menjadikannya lebih mudah dibaca dan difahami.

Penyertaan Sintaks untuk Rayuan Visual Dipertingkat

Jika anda inginkan peningkatan visual tambahan, seperti penyerlahan sintaks, anda boleh menggunakan sihir regex untuk mencapai ini:

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

Kod Contoh

Berikut ialah contoh penuh yang menunjukkan pencetakan cantik dan penyerlahan sintaks:

// 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;
}

Kod ini menjana perwakilan objek JSON yang menarik secara visual, menjadikannya lebih mudah untuk manusia membaca dan memahami.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencetak cantik JSON dalam JavaScript untuk kebolehbacaan dan daya tarikan visual yang lebih baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!