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;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;40%;height:80%;display: " id="out"></textarea> 69 <div style="position:absolute;left:45%;top:12%;6%;height:4%;"> 70 <input type="button" value="提交" onclick="showJson();"> 71 </div> 73 </body> 74 </html>