Wie kann ich JSON in JavaScript hübsch drucken und Syntaxhervorhebung hinzufügen?

Pretty-Printing JSON in JavaScript

Die Anzeige von JSON in einem für Menschen lesbaren Format ist für das Verständnis und die Fehlerbehebung von Daten unerlässlich. In JavaScript wird dies durch die native Funktion JSON.stringify() erreicht.

Native Pretty-Printing:

Das dritte Argument von JSON.stringify() ermöglicht Pretty -printing und gibt die Einrückungsebene an. Zum Beispiel:

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

Dadurch wird JSON mit zwei Einrückungsstellen ausgegeben, was die Lesbarkeit erleichtert.

Syntaxhervorhebung:

Für Bei einer aufwändigeren Formatierung können Sie reguläre Ausdrücke verwenden, um verschiedene Elemente innerhalb der JSON-Zeichenfolge hervorzuheben.

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

Diese Funktion ersetzt bestimmte Muster durch HTML-Tags, um Stile wie Farbe auf verschiedene JSON-Elemente anzuwenden.

Vollständiger Codeausschnitt:

Hier ist ein umfassendes Beispiel:

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

Dieses Skript analysiert ein JSON-Objekt, druckt es hübsch aus und zeigt es zusammen mit syntaxhervorgehobenem JSON an.

Das obige ist der detaillierte Inhalt vonWie kann ich JSON in JavaScript hübsch drucken und Syntaxhervorhebung hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!