原生js格式化json工具
原生js格式化json工具
Jack Chen
发布于 2018-09-14 07:39:21
发布于 2018-09-14 07:39:21
代码可运行
运行总次数：0
代码可运行
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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-07-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
