javascript - 带有句法着色的 Json Pretty Print

Question

我正在尝试在 html 中漂亮地打印我的 json 数据，并进行一些语法着色。

但是我在代码中遇到了一些空值(空列表、空字符串)的问题。

这是代码:

        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>

在上面的代码中，lint json变量的violations项有一个空列表值，然后这个键没有以正确的颜色打印，它只是未处理。 我尝试了不同的方法，但我不明白出了什么问题。

您可以自己尝试该代码，您会发现语法着色不适用于最后一项。

Answer 1

这可能会帮助你:

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