How can I pretty-print JSON in JavaScript for better readability and visual appeal?

Pretty-printing JSON in JavaScript for Improved Readability

When working with JSON data, it's often desirable to display it in a visually appealing manner for human readability. JavaScript provides a solution to this need with the JSON.stringify() method.

Using JSON.stringify() for Pretty-printing

By default, JSON.stringify() generates a compact string representation of the JSON object. However, you can enable pretty-printing by providing a third argument that specifies the spacing level.

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

This generates a JSON string with indentation and whitespace, making it easier to read and understand.

Syntax Highlighting for Enhanced Visual Appeal

If you desire additional visual enhancements, such as syntax highlighting, you can employ regex magic to achieve this:

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

Sample Code

Here's a full example that demonstrates both pretty-printing and syntax highlighting:

// 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;
}

This code generates a visually appealing representation of the JSON object, making it easier for humans to read and comprehend.

The above is the detailed content of How can I pretty-print JSON in JavaScript for better readability and visual appeal?. For more information, please follow other related articles on the PHP Chinese website!