带有语法着色的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变量的违规项有一个空列表值，然后此键未使用正确的颜色打印，只是未处理。 我尝试了不同的方法，但是我不明白哪里出了问题。

您可以自己尝试使用该代码，并且会注意到语法着色不适用于此最后一项。

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