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

2.

<!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

 

转载于:https://www.cnblogs.com/justSmile2/p/11279951.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值