JSON格式化工具，简易实现。作为技术宅，直接上代码，供大家使用。前提：一定要引入jquery哦。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #btn{width:100px;height:30px;line-height:30px;text-align:center;display:block;margin-bottom:20px;} #content_value,#output_value{ width:25%; height:500px; float:left; margin-right:5%; } #content_value,#output_value{ min-height:284px; resize:none; } .child{ padding-left:20px; font-size:16px; } #myObj{ width:30%; padding:10px 0; border:#ccc solid 1px; font-size:12px; min-height:485px; float:left; overflow:auto; } em{ font-style:normal; color: #575757; font-size: 12px; } .open{ display:block; } .close{ display:none; } </style> </head> <body> <input type="button" value="格式化" onclick="check()" id='btn'> <textarea id="content_value"> </textarea> <textarea id="output_value"> </textarea> <div id="myObj"></div> </body> <script src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> //判断是否为array function isArray(o) { return Object.prototype.toString.call(o) === '[object Array]'; } function formatObject(name,o,num){ //如果是对象，遍历属性 var div="<div class='child close'>"; var numObj=""; if(!isNaN(num)){ numObj="["+num+"]"; }else{ numObj=name+" : "; } var html =div+"<em class='obj' onClick='openOrClose(this)'>+对象"+numObj+"</em>"; for(var prop in o){ var obj=o[prop]; if(Object.prototype.toString.call(obj)==='[object Object]'){ html+=formatObject(prop,obj,"str"); }else if(isArray(obj)){ html+=div+"<em class='arr' onClick='openOrClose(this)'>+数组</em> "+prop+"<em> : [</em>"; for (var i=0;i<obj.length;i++){ html+=formatObject(null,obj[i],i); } html+="<em>]</em></div>"; }else{ //不是对象，而是string ，直接插入 html+=div+"<em class='prop'>-属性</em> "+prop+" : "+obj+"</div>"; } } html+="</div>"; return html; } function check(){ var text_value = document.getElementById('content_value').value; if(text_value == ""){ alert("不能为空"); return false; } else { var json=eval('(' + text_value + ')'); text_value=JSON.stringify(json); var res=""; for(var i=0,j=0,k=0,ii,ele;i<text_value.length;i++) {//k:缩进，j:""个数 ele=text_value.charAt(i); if(j%2==0&&ele=="}") { k--; for(ii=0;ii<k;ii++) ele=" "+ele; ele=" "+ele; } else if(j%2==0&&ele=="{") { ele+=" "; k++; for(ii=0;ii<k;ii++) ele+=" "; } else if(j%2==0&&ele==",") { ele+=" "; for(ii=0;ii<k;ii++) ele+=" "; } else if(ele==""") j++; res+=ele; } document.getElementById('output_value').value = res; } var json=eval('(' + text_value + ')'); var html=""; html=formatObject("JSON",json,"aa"); document.getElementById('myObj').innerHTML=html; //class属性删除close 添加open var obj_class=document.getElementById('myObj').firstChild.className; var blank = (obj_class != '') ? ' ' : ''; var added = obj_class + blank + 'open'; var removed =added.replace('close', ''); removed = removed.replace(/(^s+)|(s+$)/g, ''); document.getElementById('myObj').firstChild.className=removed; } function openOrClose(o){ var div =$(o).nextAll("div"); if(div.hasClass("close")){ $(o).html($(o).html().replace("+","-")); div.removeClass("close"); div.addClass("open"); }else{ $(o).html($(o).html().replace("-","+")); div.removeClass("open"); div.addClass("close"); } } </script> </html>
使用时，只需要将目标字符串粘贴进第一个文本框，点击“格式化”，就可以把JSON串格式化了。如图：
手码不易，转载请注明出处。