自制小工具-格式化json

爱被打了一巴掌 2022-12-24 15:48 119阅读 0赞

**目录**

背景：

实现：

使用方式：

界面截图：

--------------------

### 背景： ###

后端总是要返回一些json响应数据，这些数据不格式化的话看着不顺眼，用网上的格式化工具又觉得是内部的敏感数据，万一被收集会带来不安全的因素，所以就想着自己做一个，一种是用上篇博客说的 [ubuntu 格式化json][ubuntu _json] 这种，这种可以使用命令去格式化，如果在shell里面不想切出来就可以用这种方式，如果在外面在切换成shell，不方便，故有了下面一种解决方式。

### 实现： ###

不使用第三方的js，纯html+js实现。

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"> 
    	<title>格式化json</title>
    </head>
    <body>
    
    <div>
    <textarea rows="15" cols="200" id="inputJson" >
    
    </textarea>
    </br>
    <input type="button" onclick="parseJson(false)" value="格式化">
    <input type="button" onclick="parseJson(true)" value="压缩">
    <input type="button" onclick="copy()" value="复制代码">
    <pre id="result" style="border:#ddcbc2 1px solid ; margin:5px 5px auto 0">
     
    </pre>
    
    </div>
    
    </body>
    
    <script>
    function copy() {
    
       selectText("result")
       document.execCommand("Copy"); // 执行浏览器复制命令
       alert("已复制好，可贴粘");
    }
    
    function selectText(element) {
            var text = document.getElementById(element);
            if (document.body.createTextRange) {
                var range = document.body.createTextRange();
                range.moveToElementText(text);
                range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(text);
                selection.removeAllRanges();
                selection.addRange(range);
            } else {
                alert("none");
            }
        }
    
    function parseJson(isCompress) {
      var json = document.getElementById("inputJson").value;
      if(isCompress){
        document.getElementById("result").innerHTML=format(json,true)
      }
      else{
        document.getElementById("result").innerHTML=format(json)
     }
    }
    
    function format(txt,compress/*是否为压缩模式*/){/* 格式化JSON源码(对象转换为JSON文本) */  
            var indentChar = '    ';   
            if(/^\s*$/.test(txt)){   
                alert('数据为空,无法格式化! ');   
                return;   
            }   
            try{var data=eval('('+txt+')');}   
            catch(e){   
                alert('数据源语法错误,格式化失败! 错误信息: '+e.description,'err');   
                return;   
            };   
            var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0;   
               
            var notify=function(name,value,isLast,indent/*缩进*/,formObj){   
                nodeCount++;/*节点计数*/  
                for (var i=0,tab='';i<indent;i++ )tab+=indentChar;/* 缩进HTML */  
                tab=compress?'':tab;/*压缩模式忽略缩进*/  
                maxDepth=++indent;/*缩进递增并记录*/  
                if(value&&value.constructor==Array){/*处理数组*/  
                    draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/  
                    for (var i=0;i<value.length;i++)   
                        notify(i,value[i],i==value.length-1,indent,false);   
                    draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/  
                }else   if(value&&typeof value=='object'){/*处理对象*/  
                        draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/  
                        var len=0,i=0;   
                        for(var key in value)len++;   
                        for(var key in value)notify(key,value[key],++i==len,indent,true);   
                        draw.push(tab+'}'+(isLast?line:(','+line)));/*缩进'}'换行,若非尾元素则添加逗号*/  
                    }else{   
                            if(typeof value=='string')value='"'+value+'"';   
                            draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line);   
                    };   
            };   
            var isLast=true,indent=0;   
            notify('',data,isLast,indent,false);   
            return draw.join('');   
        } 
    
    
    </script>
    </html>

### 使用方式： ###

复制以上代码，新建一个 xxx.html，粘贴进去，用浏览器打开即可！

### 界面截图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjg4ODg4ODg4ODg4ODg4ODg4_size_16_color_FFFFFF_t_70][]

### 其它：[谷歌浏览器安装json格式化插件][json] ###

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjg4ODg4ODg4ODg4ODg4ODg4_size_16_color_FFFFFF_t_70 1][]

插件下载地址：[https://github.com/gildas-lormeau/JSONView-for-Chrome][https_github.com_gildas-lormeau_JSONView-for-Chrome]

[ubuntu _json]: https://daguang.blog.csdn.net/article/details/110081267
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjg4ODg4ODg4ODg4ODg4ODg4_size_16_color_FFFFFF_t_70]: /images/20221120/5a4d2b1f37cc45ad80f2273ea5919599.png
[json]: https://www.cnblogs.com/songyanan/p/9224347.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjg4ODg4ODg4ODg4ODg4ODg4_size_16_color_FFFFFF_t_70 1]: /images/20221120/a74ebf01162241afaf77fb4bcfdc5ea7.png
[https_github.com_gildas-lormeau_JSONView-for-Chrome]: https://github.com/gildas-lormeau/JSONView-for-Chrome