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, "	")

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, '
$1
')          
                    .replace(/(\,)/g, '$1
')
                    .replace(/(

)/g, '
'); 
       (json.split('
')).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 + '
';
            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;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;40%;height:80%;display: " id="out"></textarea>
    <div style="position:absolute;left:45%;top:12%;6%;height:4%;">
    <input type="button" value="提交" onclick="showJson();">
    </div>
</body>
</html>

View Code

相关阅读:
vue自定义select组件
基于better-scroll封装一个上拉加载下拉刷新组件
vue自定义tap指令
vue实现分页器(仿element)
js异步队列之理解
Element源码阅读(2)
Element源码阅读(1)
unity3d模仿魔兽世界鼠标对游戏操作
unity3d制作小地图（MiniMap）的简单Demo
利用unity3d自带的CharacterController包制作第一人称控制模型的简单Demo

原文地址：https://www.cnblogs.com/justSmile2/p/11279951.html