JavaScript Pretty Print JSON

Valentine Kagwiria 12 ottobre 2023
  1. Usa JSON.stringify() per Pretty Print JSON in JavaScript
  2. Evidenzia la sintassi JSON
  3. Usa JSON.parse() per Pretty Print JSON in JavaScript
  4. Usa un array JSON
JavaScript Pretty Print JSON

Questo articolo descrive come stampare abbastanza JSON in JavaScript.

Usa JSON.stringify() per Pretty Print JSON in JavaScript

L’argomento JSON.stringify() consente di visualizzare il contenuto in una bella stampa e consente all’utente di impostare la spaziatura che si adatta alla propria leggibilità.

Puoi farlo impostando una variabile stringa come segue.

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

Evidenzia la sintassi JSON

Se è necessario evidenziare una sintassi JSON, è necessario creare una funzione e includere il codice regex.

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

Usa JSON.parse() per Pretty Print JSON in JavaScript

Il metodo sopra usa json.stringify() e funziona alla grande sugli oggetti JSON, ma non sulle stringhe JSON. Per dare una bella impronta di una stringa JSON, dovrai prima convertirla in un oggetto.

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

Assicurati di racchiudere la stringa nei tag HTML <pre> e </pre> in modo che possa essere visualizzata correttamente.

Usa un array JSON

In alternativa, puoi utilizzare un array JSON in JavaScript. È semplice e non necessita di calcoli aggiuntivi, che potrebbero rallentare il programma, soprattutto se ripetuto più volte.

Per esempio:

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

Questo dovrebbe essere utilizzato anche nei tag <pre> e </pre>.