JavaScript Pretty Print JSON

1. Verwendung von JSON.stringify() zu Pretty Print JSON in JavaScript
2. Hervorheben der JSON-Syntax
3. Verwendung von JSON.parse() zum Hervorheben von JSON in JavaScript
4. Verwendung von ein JSON-Array

Dieser Artikel beschreibt, wie man JSON in JavaScript hübsch druckt.

Verwendung von JSON.stringify() zu Pretty Print JSON in JavaScript

Mit dem Argument JSON.stringify() kann der Inhalt in hübschem Druck angezeigt werden, und der Benutzer kann den Abstand festlegen, der seiner Lesbarkeit entspricht.

Sie können dies tun, indem Sie eine Zeichenkettenvariable wie folgt festlegen.

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

Hervorheben der JSON-Syntax

Wenn Sie eine JSON-Syntax hervorheben müssen, müssen Sie eine Funktion erstellen und Regex-Code einschließen.

function prettyString(json) {
  if (typeof json != 'string') {
    json = JSON.stringify(json, undefined, 2);
  }
  json =
      json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&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 str1 = 'number';
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            str1 = 'key';
          } else {
            str1 = 'string';
          }
        } else if (/true|false/.test(match)) {
          str1 = 'boolean';
        } else if (/null/.test(match)) {
          str1 = 'null';
        }
        return '<span class="' + str1 + '">' + match + '</span>';
      });
}

Verwendung von JSON.parse() zum Hervorheben von JSON in JavaScript

Die obige Methode verwendet json.stringify() und funktioniert hervorragend bei JSON-Objekten, jedoch nicht bei JSON-Zeichenketten. Um einen hübschen Ausdruck einer JSON-Zeichenkette zu erhalten, müssen Sie diese zuerst in ein Objekt konvertieren.

var string1 = '{"program":"code"}';
var prettyPrint = JSON.stringify(JSON.parse(string1), null, 2);

Stellen Sie sicher, dass die Zeichenkette in die HTML-Tags <pre> und </pre> eingeschlossen wird, damit sie ordnungsgemäß angezeigt werden kann.

Verwendung von ein JSON-Array

Alternativ können Sie ein JSON-Array in JavaScript verwenden. Es ist einfach und erfordert keine zusätzliche Berechnung, was das Programm verlangsamen könnte, insbesondere wenn es mehrmals wiederholt wird.

Beispielsweise:

JSON.stringify(jsonobj, null, '\t')

Dies sollte auch in den Tags <pre> und </pre> verwendet werden.