首页 > 代码库 > JS 前端格式化JSON字符串工具

JS 前端格式化JSON字符串工具

2024-08-28 01:49:20   225人阅读

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="\n"+ele;
            }
            else if(j%2==0&&ele=="{")
            {
                ele+="\n";
                k++;     
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(j%2==0&&ele==",")
            {
                ele+="\n";
                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串格式化了。如图：

技术分享

手码不易，转载请注明出处。

JS 前端格式化JSON字符串工具


联系
我们