JavaScript Pretty Print JSON

1. Utilice JSON.stringify() para Pretty Print JSON en JavaScript
2. Resalte la sintaxis JSON
3. Utilice JSON.parse() para Pretty Print JSON en JavaScript
4. Utilice un array JSON

Este artículo describe cómo imprimir JSON en JavaScript.

Utilice JSON.stringify() para Pretty Print JSON en JavaScript

El argumento JSON.stringify() permite que el contenido se muestre en letra bonita y permite al usuario establecer el espaciado que se adapte a su legibilidad.

Puede hacerlo configurando una variable de cadena de la siguiente manera.

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

Resalte la sintaxis JSON

Si necesita resaltar una sintaxis JSON, debe crear una función e incluir código 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>';
      });
}

Utilice JSON.parse() para Pretty Print JSON en JavaScript

El método anterior usa json.stringify() y funciona muy bien en objetos JSON, pero no en cadenas JSON. Para dar una impresión bonita de una cadena JSON, primero deberá convertirla en un objeto.

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

Asegúrese de envolver la cadena en las etiquetas HTML <pre> y </pre> para que se muestre correctamente.

Utilice un array JSON

Alternativamente, puede usar un array JSON en JavaScript. Es simple y no necesita cálculos adicionales, lo que podría ralentizar el programa, especialmente cuando se repite varias veces.

Por ejemplo:

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

Esto también debe usarse en las etiquetas <pre> y </pre>.