[原生js] 简单一招实现json数据可视化

转自：http://udn.yyuap.com/thread-57397-1-1.html

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

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

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

复制代码

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

　　我们要用到的就是这第三个参数，它可以指定在生成的字符串中加多少空格，从而生成有一定格式的字符串。生成的字符串我们可以放在

标签中，这样就能很好的显示缩进。然后呢，为了让生成的数据有高亮效果，我们还可以写一个简单的高亮函数。基本就是这么个原理啦，请看代码实现：

1. function output(inp) {
   
2.     document.body.appendChild(document.createElement('pre')).innerHTML = inp;
   
3. }
   
4. 
   
5. function syntaxHighlight(json) {
   
6.     json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   
7.     return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
   
8.         var cls = 'number';
   
9.         if (/^"/.test(match)) {
   
10.             if (/:$/.test(match)) {
    
11.                 cls = 'key';
    
12.             } else {
    
13.                 cls = 'string';
    
14.             }
    
15.         } else if (/true|false/.test(match)) {
    
16.             cls = 'boolean';
    
17.         } else if (/null/.test(match)) {
    
18.             cls = 'null';
    
19.         }
    
20.         return '<span class="' + cls + '">' + match + '</span>';
    
21.     });
    
22. }
    
23. 
    
24. var obj = {
    
25.     num: 1234,
    
26.     str: '字符串',
    
27.     arr: [1,2,3,4,5,6],
    
28.     obj: {
    
29.         name: 'tom',
    
30.         age: 10,
    
31.         like: ['a', 'b']
    
32.     }
    
33. };
    
34. var str = JSON.stringify(obj, undefined, 4);
    
35. 
    
36. output(syntaxHighlight(str));

复制代码

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

　　是不是简单而又实用呢~