zoukankan      html  css  js  c++  java
  • JS 前端格式化JSON字符串工具

    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串格式化了。如图:

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

  • 相关阅读:
    SQL Server中的事务日志管理(7/9):处理日志过度增长
    SQL Server中的事务日志管理(6/9):大容量日志恢复模式里的日志管理
    如何阻止SELECT * 语句
    SQL Server中的事务日志管理(5/9):完整恢复模式里的日志管理
    SQL Server中的事务日志管理(4/9):简单恢复模式里的日志管理
    SQL Server中的事务日志管理(3/9):事务日志,备份与恢复
    SQL Server中的事务日志管理(2/9):事务日志架构概述
    在SQL Server里如何进行页级别的恢复
    SQL Server中的事务日志管理(1/9):事务日志概况
    第24/24周 数据库维护(Database Maintenance)
  • 原文地址:https://www.cnblogs.com/sloveling/p/format_json.html
Copyright © 2011-2022 走看看