简单一招实现json数据可视化

开发一个内部功能时碰到的需求，要把json数据在页面上展示出来，平时浏览器会安装jsonView这样的扩展来看json数据，但是程序要用到的话该怎么办呢？今天在网上搜索的时候，发现了这个小技巧，分享一下。

要用到的核心是JSON.stringify这个函数，没想到吧，平时我们只把它用来序列号json数据。但是这个stringify是有三个参数的，

JavaScript

JSON.stringify(value [, replacer] [, space])

1	JSON.stringify(value [, replacer] [, space])

，具体描述请看这里：https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx

我们要用到的就是这第三个参数，它可以指定在生成的字符串中加多少空格，从而生成有一定格式的字符串。生成的字符串我们可以放在<pre>标签中，这样就能很好的显示缩进。然后呢，为了让生成的数据有高亮效果，我们还可以写一个简单的高亮函数。基本就是这么个原理啦，请看代码实现：

JavaScript

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 = { num: 1234, str: '字符串', arr: [1,2,3,4,5,6], obj: { name: 'tom', age: 10, like: ['a', 'b'] } }; var str = JSON.stringify(obj, undefined, 4); output(syntaxHighlight(str));

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

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 = {     num: 1234,     str: '字符串',     arr: [1,2,3,4,5,6],     obj: {         name: 'tom',         age: 10,         like: ['a', 'b']     } }; var str = JSON.stringify(obj, undefined, 4);   output(syntaxHighlight(str));

最终生成的效果就是这样的：