Wie drucke ich JSON in JavaScript hübsch aus?

Pretty-Print JSON mit JavaScript

Die Konvertierung von JSON-Daten in ein für Menschen lesbares Format ist entscheidend für das Debuggen und das Verständnis ihrer Struktur. In JavaScript wird „Pretty-Printing“-JSON nativ durch die Methode JSON.stringify() unterstützt.

Native Pretty-Printing

Die Funktion JSON.stringify() benötigt drei Argumente: das zu konvertierende JSON-Objekt, eine Ersetzungsfunktion (optional) und die Abstandsebene (optional). Um den Abstand anzugeben, übergeben Sie eine positive Ganzzahl als drittes Argument. Zum Beispiel:

var obj = { foo: 'bar', baz: [1, 2, 3] };
var json = JSON.stringify(obj, null, 2);

Dies ergibt:

"{
  "foo": "bar",
  "baz": [
    1,
    2,
    3
  ]
}"

Syntaxhervorhebung

Für mehr visuelle Klarheit können Sie reguläre Ausdrücke verwenden Wenden Sie Syntaxhervorhebung auf die JSON-Zeichenfolge an. Zum Beispiel:

function syntaxHighlight(json) {
  // Escape HTML characters
  json = json.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '>');
  
  // Highlight different types using span tags
  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>`;
  });
}

Diese Funktion ersetzt Schlüsselelemente durch andere Farben und Stile, um die JSON-Struktur besser lesbar zu machen.

Beispiel

Hier ist ein Beispiel, das natives Pretty-Printing und Syntaxhervorhebung kombiniert:

// Pretty-print the JSON object
var json = JSON.stringify(obj, null, 2);

// Highlight the JSON string
var highlighted = syntaxHighlight(json);

// Display the highlighted JSON string in the browser console
console.log(highlighted);

Das obige ist der detaillierte Inhalt vonWie drucke ich JSON in JavaScript hübsch aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!