Comment puis-je imprimer joliment du JSON en JavaScript pour une meilleure lisibilité et un meilleur attrait visuel ?

JSON imprimé joliment en JavaScript pour une lisibilité améliorée

Lorsque vous travaillez avec des données JSON, il est souvent souhaitable de les afficher d'une manière visuellement attrayante pour une lisibilité humaine. JavaScript apporte une solution à ce besoin avec la méthode JSON.stringify().

Utilisation de JSON.stringify() pour Pretty-printing

Par défaut, JSON.stringify() génère une chaîne compacte représentation de l’objet JSON. Cependant, vous pouvez activer l'impression jolie en fournissant un troisième argument qui spécifie le niveau d'espacement.

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

Cela génère une chaîne JSON avec une indentation et des espaces, ce qui la rend plus facile à lire et à comprendre.

Mise en évidence de la syntaxe pour un attrait visuel amélioré

Si vous désirez des améliorations visuelles supplémentaires, telles que la mise en évidence de la syntaxe, vous pouvez utiliser la magie des regex pour obtenir ceci :

function syntaxHighlight(json) {
  // Replace special characters for HTML safety
  json = json.replace(/&amp;/g, '&amp;amp;').replace(/</g, '&amp;lt;').replace(/>/g, '&amp;gt;');

  // Add HTML spans with appropriate classes for styling
  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'; // Default class for numbers
    if (/^"/.test(match)) { // String
      if (/:$/.test(match)) { // Key
        cls = 'key';
      } else { // String value
        cls = 'string';
      }
    } else if (/true|false/.test(match)) { // Boolean
      cls = 'boolean';
    } else if (/null/.test(match)) { // Null
      cls = 'null';
    }
    return '<span class="' + cls + '">' + match + '</span>';
  });
}

Exemple de code

Voici un exemple complet qui démontre à la fois une jolie impression et une coloration syntaxique :

// Sample JSON object
var obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] };

// Pretty-print the JSON using `JSON.stringify()`
var str = JSON.stringify(obj, undefined, 4);
output(str);

// Syntax highlight the pretty-printed JSON
output(syntaxHighlight(str));

// Function to append output to the page
function output(inp) {
  document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

Ce code génère une représentation visuellement attrayante de l'objet JSON, ce qui facilite la lecture et la compréhension par les humains.

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!