原生js格式化json和格式化xml的方法

    在工作中一直看各位前辈的博客解决各种问题，对我的帮助很大，非常感谢！ 之前一直比较忙没有写博客，终于过年有了点空闲时间，可以把自己积累的东西分享下，笔记中的部分函数不是自己写的，都是工作中一点点积累的，由于时间已久比较零散找不到对应的主人了，没法注明出处还请见谅。我们经常遇到从后代拿到的没有格式化的json和xml，需要格式化好了以后显示在页面上，这篇文章希望可以让您更加方便的实现这个需求。本文的代码使用原生方式编写，不需要引用其他插件，可以在传统项目和自动化项目中直接使用。为了方便测试，我整理了下，只要建一个空的html,将所有的代码copy进去，本地打开就可以查看效果。做好的html在GitHub上也放了一份,以后有时间就会将自己整理的笔记放到上面,地址如下:  https://github.com/binginsist/binginsistNote

格式化json实例

 
 

  
  



    
    
    
    



    
    

    
    

<script>
    //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
    var formatJson = function (json, options) {
        var reg = null,
                formatted = '',
                pad = 0,
                PADDING = '    ';
        options = options || {};
        options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
        options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
        if (typeof json !== 'string') {
            json = JSON.stringify(json);
        } else {
            json = JSON.parse(json);
            json = JSON.stringify(json);
        }
        reg = /([\{\}])/g;
        json = json.replace(reg, '\r\n$1\r\n');
        reg = /([\[\]])/g;
        json = json.replace(reg, '\r\n$1\r\n');
        reg = /(\,)/g;
        json = json.replace(reg, '$1\r\n');
        reg = /(\r\n\r\n)/g;
        json = json.replace(reg, '\r\n');
        reg = /\r\n\,/g;
        json = json.replace(reg, ',');
        if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
            reg = /\:\r\n\{/g;
            json = json.replace(reg, ':{');
            reg = /\:\r\n\[/g;
            json = json.replace(reg, ':[');
        }
        if (options.spaceAfterColon) {
            reg = /\:/g;
            json = json.replace(reg, ':');
        }
        (json.split('\r\n')).forEach(function (node, index) {
                    var i = 0,
                            indent = 0,
                            padding = '';

                    if (node.match(/\{$/) || node.match(/\[$/)) {
                        indent = 1;
                    } else if (node.match(/\}/) || node.match(/\]/)) {
                        if (pad !== 0) {
                            pad -= 1;
                        }
                    } else {
                        indent = 0;
                    }

                    for (i = 0; i < pad; i++) {
                        padding += PADDING;
                    }

                    formatted += padding + node + '\r\n';
                    pad += indent;
                }
        );
        return formatted;
    };
    //引用示例部分
    //(1)创建json格式或者从后台拿到对应的json格式
    var originalJson = {"name": "binginsist", "sex": "男", "age": "25"};
    //(2)调用formatJson函数,将json格式进行格式化
    var resultJson = formatJson(originalJson);
    //(3)将格式化好后的json写入页面中
    document.getElementById("writePlace").innerHTML = '
' +resultJson + '
';
</script>


 
 
 
 

  
  格式化xml实例:
 
 
 
 

  
  

   
   



    
     
     
    



     
     

     
     

<script>
    //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
    String.prototype.removeLineEnd = function () {
        return this.replace(/(<.+?\s+?)(?:\n\s*?(.+?=".*?"))/g, '$1 $2')
    }
    function formatXml(text) {
        //去掉多余的空格
        text = '\n' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
                    return name + ' ' + props.replace(/\s+(\w+=)/g, " $1");
                }).replace(/>\s*?\n<");

        //把注释编码
        text = text.replace(/\n/g, '\r').replace(/
     
     /g, function ($0, text) {
            var ret = '
     
     ';
            //alert(ret);
            return ret;
        }).replace(/\r/g, '\n');

        //调整格式
        var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg;
        var nodeStack = [];
        var output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
            var isClosed = (isCloseFull1 == '/') || (isCloseFull2 == '/' ) || (isFull1 == '/') || (isFull2 == '/');
            //alert([all,isClosed].join('='));
            var prefix = '';
            if (isBegin == '!') {
                prefix = getPrefix(nodeStack.length);
            }
            else {
                if (isBegin != '/') {
                    prefix = getPrefix(nodeStack.length);
                    if (!isClosed) {
                        nodeStack.push(name);
                    }
                }
                else {
                    nodeStack.pop();
                    prefix = getPrefix(nodeStack.length);
                }

            }
            var ret = '\n' + prefix + all;
            return ret;
        });

        var prefixSpace = -1;
        var outputText = output.substring(1);
        //alert(outputText);

        //把注释还原并解码，调格式
        outputText = outputText.replace(/\n/g, '\r').replace(/(\s*)
     
     /g, function ($0, prefix, text) {
            //alert(['[',prefix,']=',prefix.length].join(''));
            if (prefix.charAt(0) == '\r')
                prefix = prefix.substring(1);
            text = unescape(text).replace(/\r/g, '\n');
            var ret = '\n' + prefix + '
     
     ';
            //alert(ret);
            return ret;
        });

        return outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n');
    }
    function getPrefix(prefixIndex) {
        var span = '    ';
        var output = [];
        for (var i = 0; i < prefixIndex; ++i) {
            output.push(span);
        }

        return output.join('');
    }

    //引用示例部分
    //(1)创建xml格式或者从后台拿到对应的xml格式
    var originalXml = '
     
      
     
      
      
      
       
       Tove
      
       
      
      
       
       Jani
      
       
      
      
       
       Reminder
      
       Dont forget me this weekend! 
     
     ';
    //(2)调用formatXml函数,将xml格式进行格式化
    var resultXml = formatXml(originalXml);
    //(3)将格式化好后的formatXml写入页面中
    document.getElementById("writePlace").innerHTML = '
' +resultXml + '
';
</script>