js 格式化 json 字符串

1.JSON.stringify的三个参数

var json = {"@odata.context":"$metadata#AddTableOne_466281s","value":[{"NAME":"李四","BIRTHDAY":"2018-10-03T11:33:50+08:00","AGE":"0","ID":"111111"}]}
JSON.stringify(json, null, "\t")

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js格式化json</title>
    <script>
    var formatJson = function (json) {
        var outStr = '',     //转换后的json字符串
            padIdx = 0,         //换行后是否增减PADDING的标识
            space = '    ';   //4个空格符
        if (typeof json !== 'string') {
            json = JSON.stringify(json);
        }
        debugger
        json = json.replace(/([\{\}\[\]])/g, '\r\n$1\r\n')          
                    .replace(/(\,)/g, '$1\r\n')
                    .replace(/(\r\n\r\n)/g, '\r\n'); 
       (json.split('\r\n')).forEach(function (node, index) {
            var indent = 0,
                padding = '';
            if (node.match(/[\{\[]/)){
              indent = 1;
            }else if (node.match(/[\}\]]/)){
              padIdx = padIdx !== 0 ? --padIdx : padIdx;
            }else{
              indent = 0;
            }    
            for (var i = 0; i < padIdx; i++){
              padding += space;
            }    
            outStr += padding + node + '\r\n';
            padIdx += indent;
        });
        return outStr;
    };
    //引用示例部分
    //var originalJson = {'name':'ccy','age':18,'info':[{'address':'wuhan'},{'interest':'playCards'}]};
    var showJson = function(){
        var originalJson = document.getElementById('inputJson').value;
        console.log(originalJson);
        //(2)调用formatJson函数,将json格式进行格式化
        var resultJson = formatJson(originalJson);
        document.getElementById('out').innerHTML = resultJson;
    }
</script>
</head>
<body>
    <span style="position:absolute;left:0px;top:20px;font-size: 20px;font-family: '微软雅黑';color: #2F4F4F;">输入json</span>
    <textarea style="position:absolute;left:0px;top:80px;width:40%;height:80%;" cols="50" rows="20" id="inputJson"></textarea>
    <span style="position:absolute;left:55%;top:20px;font-size: 20px;font-family: '微软雅黑';color: #2F4F4F;">查看结果</span>
    <textarea style="position:absolute;left:55%;top:80px;width:40%;height:80%;display: " id="out"></textarea>
    <div style="position:absolute;left:45%;top:12%;width:6%;height:4%;">
    <input type="button" value="提交" onclick="showJson();">
    </div>
</body>
</html>

View Code

js 格式化 json 字符串

猜你喜欢