🔍 JSON Formatter

Technical Deep-Dive: Browser-Based JSON Parsing, Formatting, and Syntax Validation

Inside the web browser, JSON processing relies on the native JSON global object, which was introduced to standard web specifications in ECMAScript 5 (ES5). To convert a raw text string into a formatted JSON structure, developers use the native methods JSON.parse() and JSON.stringify(). The transformation involves a two-step parse-and-serialize pipeline.

The parser utilizes JSON.parse(text) to evaluate the raw string. If the string is valid, the browser's compiled C++ engine parses the characters and construct an in-memory JavaScript representation (an object or array). If the string violates JSON syntax rules, the engine throws a SyntaxError exception. A syntax validator captures this exception using a try...catch block to retrieve details about the error, including the character offset where the parser failed:

try {
    const parsed = JSON.parse(rawText);
    // Proceed to format
} catch (error) {
    const errorMessage = error.message;
    // Parse error.message to locate the error position
}

To pretty-print the resulting object, developers call JSON.stringify(value, replacer, space). The third parameter, space, is the key to formatting. If space is set to a number (e.g., 2 or 4), the engine automatically adds newlines and spaces of that width at every nesting level. If set to a string (such as "\t"), it uses tabs for indentation. The code is executed as follows:

const formattedJSON = JSON.stringify(parsed, null, 4);

To implement syntax highlighting, formatters do not output raw text. Instead, they run the string through a regular expression that matches tokens (keys, strings, numbers, booleans, nulls) and wraps each in a styled HTML <span> tag. The regex matches strings, booleans, numbers, and structural tokens individually:

const highlighted = formattedJSON.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    let cls = 'text-amber-600'; // numbers
    if (/^"/.test(match)) {
        if (/:$/.test(match)) {
            cls = 'text-blue-600 font-bold'; // keys
        } else {
            cls = 'text-green-600'; // strings
        }
    } else if (/true|false/.test(match)) {
        cls = 'text-purple-600'; // booleans
    } else if (/null/.test(match)) {
        cls = 'text-slate-400'; // null
    }
    return '<span class="' + cls + '">' + match + '</span>';
});

For large JSON payloads exceeding 50MB, parsing via the browser's primary threat can cause the user interface to freeze. In production-grade tools, massive files are handled by offloading the parsing code to a Web Worker, which runs in a background thread. This keeps the browser UI responsive while processing large datasets.