原生js格式化json工具
阿新 • • 發佈：2018-07-02
-c != 空格 har pad tle 引用 pla 格式化
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>
原生js格式化json工具