Nicely format an HTML element containing a JSON string

jsonFormatter.css

pre { padding: 5px; margin: 5px; overflow-wrap: break-word;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */}
.json-string { color: #067d17; }
.json-number { color: #1750eb; }
.json-boolean { color: #0033b3; }
.json-null { color: #003bb3; }
.json-key { color: #871094; }
.json-parens { color: black; }
.json-error { color: red; }

jsonFormatter.js

function highlightJsonTokens(json) {
    var escaped = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return escaped.replace(
            /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?|(\[|\]|{|}|,))/g,
            function (match) {
                var cls = "json-parens";
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = "json-key";
                    } else {
                        cls = "json-string";
                    }
                } else if (/true|false/.test(match)) {
                    cls = "json-boolean";
                } else if (/null/.test(match)) {
                    cls = "json-null";
                } else if (/\d+(\.\d+)?/.test(match)) {
                    cls = "json-number";
                }

                var spanElement = document.createElement("span");
                spanElement.className = "ecl-u-type-m " + cls;
                spanElement.innerText = match;
                return spanElement.outerHTML;
            });
}

/**
 *  Takes an HTML element containing a JSON string, formats the JSON string in a nice way and outputs it in the
 *  destination HTML element. The formatted JSON is put in a 'pre' element appended as a child to the target element.
 *
 * @param sourceElementId The id of the parent HTML element containing the JSON value to be formatted
 * @param targetElementId The id of the parent HTML element which will contain the formatted JSON string
 */
function prettyPrintJsonContainingElement(sourceElementId, targetElementId) {
    var targetElement = document.getElementById(targetElementId);
    // remove all PRE children of the target element so that we do not risk having multiple formatted JSON children
    while (targetElement.firstChild && "PRE" === targetElement.firstChild.nodeName.toUpperCase()) {
        targetElement.removeChild(targetElement.firstChild);
    }

    var sourceElement = document.getElementById(sourceElementId);
    if (sourceElement == undefined) {
        console.error("--- Could not find HTML containing JSON element with id: [%s].", sourceElementId);
        return;
    }

    try {
        var nonformattedJsonString = sourceElement.getAttribute("value");
        if (nonformattedJsonString == null || nonformattedJsonString.trim() == "") {
            console.warn("--- JSON string of HTML element [%s] is empty.", sourceElementId);
            return;
        }

        // need the conversion string -> object -> string to add some nice wrapping and formatting
        var jsonObject = JSON.parse(nonformattedJsonString);
        var formattedJsonString = JSON.stringify(jsonObject, null, 4);
        // this element will contain the nicely formatted JSON
        var preElement = targetElement.appendChild(document.createElement('pre'));
        preElement.innerHTML = highlightJsonTokens(formattedJsonString);
    } catch (e) {
        if (preElement == undefined) {
            preElement = targetElement.appendChild(document.createElement('pre'));
        }
        preElement.innerText = "Error parsing JSON string\n" + nonformattedJsonString;
        preElement.className = "json-error";
        console.error(e);
    }
}