Json Pretty Print with syntactic coloration

Question

I'm trying to pretty print my json data in html, and do some syntactic coloration.

But I'm having a little issue with empty values (empty list, empty string) in my code.

Here is the code :

        if (!library)
          var library = {};

        function isInt(value) {
            return !isNaN(value) && (function(x) { return (x | 0) === x; })(parseFloat(value))
        };
        library.json = {
          replacer: function(match, pIndent, pKey, pVal, pEnd) {
            var int = '<span class=json-int>';
            var key = '<span class=json-key>';
            var val = '<span class=json-value>';
            var str = '<span class=json-string>';
            var r = pIndent || '';
            if (pKey)
              r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
            if (pVal)
              //r = r + (pVal[0] == '"'i ? str : val) + pVal + '</span>';
              r = r + (isInt(pVal) ? int : str) + pVal + '</span>';
            return r + (pEnd || '');
          },
          prettyPrint: function(obj) {
            var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
            return JSON.stringify(obj, null, 3)
              .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
              .replace(/</g, '&lt;').replace(/>/g, '&gt;')
              .replace(jsonLine, library.json.replacer);
          }
        };
        var lint = {
                "LintResult": "FAILED",
                "CFN_NAG": [
                    {
                        "filename": "sam.yaml",
                        "file_results": {
                            "failure_count": 0,
                            "violations": []
                        }
                    }
                ],
              "Comment": "If above CFN_NAG key has None value, check code execution log for errors/exceptions"
        }
        $('#lint').html(library.json.prettyPrint(lint));
        //document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);

        pre {
          background-color: ghostwhite;
          bovrder: 1px solid silver;
          padding: 10px 20px;
          margin: 20px; 
        }
        .json-key {
          color: brown;
        }
        .json-value {
          color: navy;
        }
        .json-string {
          color: olive;
        }
        .json-int {
          color: fuchsia;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color:lightblue">  
  <h1>JSON Data:</h1>
  <pre id="lint"></pre>
    
</div>
<p>A JSON string with 12 spaces per indentation.</p>

In the above code, the lint json variable has an empty list value for the violations item, and then this key is not print with the right color, it's just not processed. I tried different way but I don't understand what is wrong.

You can try the code your self and will notice that the syntactic coloration doesn't work for this last item.

Answer 1

This might help you out:

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    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>';
    });
}

var obj = {
            "LintResult": "FAILED",
            "CFN_NAG": [
                {
                    "filename": "sam.yaml",
                    "file_results": {
                        "failure_count": 0,
                        "violations": []
                    }
                }
            ],
          "Comment": "If above CFN_NAG key has None value, check code execution log for errors/exceptions"
    };
var str = JSON.stringify(obj, undefined, 4);

output(syntaxHighlight(str));

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; background: ghostwhite }
.string { color: olive; }
.number { color: fuchsia; }
.boolean { color: navy; }
.null { color: magenta; }
.key { color: brown; }