原生js格式化json工具

json格式化小工具，原生js编写，直接上代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>原生js格式化json的方法</title>
 6     <script>
 7     //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
 8     var formatJson = function (json) {
 9         var formatted = '',     //转换后的json字符串
10             padIdx = 0,         //换行后是否增减PADDING的标识
11             PADDING = '    ';   //4个空格符
12         /**
13          * 将对象转化为string
14          */
15         if (typeof json !== 'string') {
16             json = JSON.stringify(json);
17         }
18         /** 
19          *利用正则类似将{'name':'ccy','age':18,'info':['address':'wuhan','interest':'playCards']}
20          *---> \r\n{\r\n'name':'ccy',\r\n'age':18,\r\n
21          *'info':\r\n[\r\n'address':'wuhan',\r\n'interest':'playCards'\r\n]\r\n}\r\n
22          */
23         json = json.replace(/([\{\}])/g, '\r\n$1\r\n')
24                     .replace(/([\[\]])/g, '\r\n$1\r\n')
25                     .replace(/(\,)/g, '$1\r\n')
26                     .replace(/(\r\n\r\n)/g, '\r\n')
27                     .replace(/\r\n\,/g, ',');
28         /** 
29          * 根据split生成数据进行遍历，一行行判断是否增减PADDING
30          */
31        (json.split('\r\n')).forEach(function (node, index) {
32             var indent = 0,
33                 padding = '';
34             if (node.match(/\{$/) || node.match(/\[$/)) indent = 1;
35             else if (node.match(/\}/) || node.match(/\]/))  padIdx = padIdx !== 0 ? --padIdx : padIdx;
36             else    indent = 0;
37             for (var i = 0; i < padIdx; i++)    padding += PADDING;
38             formatted += padding + node + '\r\n';
39             padIdx += indent;
40             console.log('index:'+index+',indent:'+indent+',padIdx:'+padIdx+',node-->'+node);
41         });
42         return formatted;
43     };
44     //引用示例部分
45     //var originalJson = {'name':'ccy','age':18,'info':[{'address':'wuhan'},{'interest':'playCards'}]};
53     var showJson = function(){
54         var originalJson = document.getElementById('inputJson').value;
55         console.log(originalJson);
56         //(2)调用formatJson函数,将json格式进行格式化
57         var resultJson = formatJson(originalJson);
60         document.getElementById('out').innerHTML = resultJson;
61     }
62 </script>
63 </head>
64 <body>
65     <span style="position:absolute;left:0px;top:20px;font-size: 20px;font-family: '微软雅黑';color: #2F4F4F;">输入json</span>
66     <textarea style="position:absolute;left:0px;top:80px;width:40%;height:80%;" cols="50" rows="20" id="inputJson"></textarea>
67     <span style="position:absolute;left:55%;top:20px;font-size: 20px;font-family: '微软雅黑';color: #2F4F4F;">查看结果</span>
68     <textarea style="position:absolute;left:55%;top:80px;width:40%;height:80%;display: " id="out"></textarea>
69     <div style="position:absolute;left:45%;top:12%;width:6%;height:4%;">
70     <input type="button" value="提交" onclick="showJson();">
71     </div>
73 </body>
74 </html>

 

posted @ 2018-07-02 12:08  蟹丸  阅读(5906)  评论(0)  编辑  收藏  举报