Comment puis-je imprimer joliment du JSON en JavaScript et ajouter une coloration syntaxique ?

Pretty-Printing JSON en JavaScript

L'affichage de JSON dans un format lisible par l'homme est essentiel pour comprendre et déboguer les données. En JavaScript, ceci est réalisé grâce à la fonction native JSON.stringify().

Native Pretty-Printing :

Le troisième argument de JSON.stringify() permet de jolies -printing et précise le niveau d'indentation. Par exemple :

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

Cela produira du JSON avec 2 espaces d'indentation, ce qui le rendra plus facile à lire.

Surlignage de la syntaxe :

Pour Avec un formatage plus élaboré, vous pouvez utiliser des expressions régulières pour mettre en évidence différents éléments au sein de la chaîne JSON.

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

Cette fonction remplace certains modèles par des balises HTML pour appliquer des styles tels que la couleur à différents éléments JSON.

Extrait de code complet :

Voici un exemple complet :

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

Ce script analyse un objet JSON, l'imprime joliment et l'affiche avec le JSON mis en évidence par la syntaxe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!