vue中，xml字符串格式化展示在页面

最近需要在vue页面中，展示格式化的xml；最终格式如图

点击button按钮，弹出弹框，弹框里面的内容，是格式化的xml字符串代码；template里内容如下

<button @click="ac">格式化</button>

 <el-dialog title="格式化" :visible.sync="sss">
     <xmp><div v-text="result"></div></xmp>
 </el-dialog>

在<script>里面做具体事情

function showXml(str){
		var text = str
 
		//去掉多余的空格
        text = '\n' + text.replace(/(<\w+)(\s.*?>)/g,function($0, name, props)
        {
            return name + ' ' + props.replace(/\s+(\w+=)/g," $1");
        }).replace(/>\s*?</g,">\n<");
 
        //把注释编码
        text = text.replace(/\n/g,'\r').replace(/<!--(.+?)-->/g,function($0, text)
        {
            var ret = '<!--' + escape(text) + '-->';
            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 == '/');
            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);
 
        //把注释还原并解码，调格式
        outputText = outputText.replace(/\n/g,'\r').replace(/(\s*)<!--(.+?)-->/g,function($0, prefix,  text)
        {
            if(prefix.charAt(0) == '\r')
                prefix = prefix.substring(1);
            text = unescape(text).replace(/\r/g,'\n');
            var ret = '\n' + prefix + '<!--' + text.replace(/^\s*/mg, prefix ) + '-->';
            return ret;
        });
		//alert(outputText);
		
		outputText=	outputText.replace(/\s+$/g,'').replace(/\r/g,'\r\n');
		
		
        return outputText
		
	
    }
	
	function getPrefix(prefixIndex)
    {
        var span = '    ';
        var output = [];
        for(var i = 0 ; i < prefixIndex; ++i)
        {
            output.push(span);
        }
       
        return output.join('');
    }

最后点击事件调用，代码如下

ac(){
      this.sss=true;

      //此处xmls应该是后台给的xml字符串，这里是为了演示，直接给了固定的

        var xmls='<?xml version="1.0" encoding="UTF-8"?><note> <to>love</to><from>ss</from> <heading>调用成功</heading> <body>你好</body> </note>';

        this.result= showXml(xmls);
    },

原文链接：https://blog.csdn.net/freya_dr/article/details/100942412