自制小工具-格式化json

目录

背景:

实现:

使用方式:

界面截图:


背景:

后端总是要返回一些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,粘贴进去,用浏览器打开即可!

界面截图:

 

 

其它:谷歌浏览器安装json格式化插件

效果如下:

插件下载地址:https://github.com/gildas-lormeau/JSONView-for-Chrome

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页