JavaScript Pretty Print JSON

1. Use JSON.stringify() para Pretty Print JSON em JavaScript
2. Destaque a sintaxe JSON
3. Use JSON.parse() para Pretty Print JSON em JavaScript
4. Use um array JSON

Este artigo descreve como imprimir JSON em JavaScript.

Use JSON.stringify() para Pretty Print JSON em JavaScript

O argumento JSON.stringify() permite que o conteúdo seja exibido em letras bonitas e permite ao usuário definir o espaçamento que se adapta à sua legibilidade.

Você pode fazer isso definindo uma variável de string da seguinte maneira.

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

Destaque a sintaxe JSON

Se você precisa destacar uma sintaxe JSON, você precisa criar uma função e incluir o 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>';
      });
}

Use JSON.parse() para Pretty Print JSON em JavaScript

O método acima usa json.stringify() e funciona muito bem em objetos JSON, mas não em strings JSON. Para fornecer uma impressão bonita de uma string JSON, você precisará primeiro convertê-la em um objeto.

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

Certifique-se de envolver a string nas tags HTML <pre> e </pre> para que possa ser exibida corretamente.

Use um array JSON

Como alternativa, você pode usar um array JSON em JavaScript. É simples e não requer computação extra, o que pode tornar o programa lento, especialmente se for repetido várias vezes.

Por exemplo:

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

Isso também deve ser usado nas tags <pre> e </pre>.