原生js格式化json工具

Posted 2020-11-21 ccylovehs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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          *---> 
{
‘name‘:‘ccy‘,
‘age‘:18,

21          *‘info‘:
[
‘address‘:‘wuhan‘,
‘interest‘:‘playCards‘
]
}

22          */
23         json = json.replace(/([{}])/g, ‘
$1
‘)
24                     .replace(/([[]])/g, ‘
$1
‘)
25                     .replace(/(,)/g, ‘$1
‘)
26                     .replace(/(

)/g, ‘
‘)
27                     .replace(/
,/g, ‘,‘);
28         /** 
29          * 根据split生成数据进行遍历，一行行判断是否增减PADDING
30          */
31        (json.split(‘
‘)).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 + ‘
‘;
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>

以上是关于原生js格式化json工具的主要内容，如果未能解决你的问题，请参考以下文章