用正则表达式格式化xml代码

最新推荐文章于 2020-04-22 11:09:04 发布

深蓝色的忧伤

最新推荐文章于 2020-04-22 11:09:04 发布

阅读量546

点赞数

分类专栏： XML 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/zheng12tian/article/details/84153942

版权

XML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
    <title>Xml格式化工具</title>
    <script type="text/javascript">
		String.prototype.removeLineEnd = function(){
			return this.replace(/(<.+?\s+?)(?:\n\s*?(.+?=".*?"))/g,'$1 $2')
		}
		function formatXml(text)
		{
			/*
			 * 功能：去掉多余的空格
			 * 
			 * $0为正则表达式/(<\w+)(\s.*?>)/g匹配到的字符串
			 * name为正则表达式(<\w+)匹配到的字符串
			 * props为正则表达式(\s.*?>)匹配到的字符串
			 */
			text = '\n' + text.replace(/(<\w+)(\s.*?>)/g,function($0, name, props){
				//alert('$0='+$0+', name='+name+', props='+props);
				//alert(name + ' ' + props.replace(/\s+(\w+)/g," $1"));
				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) + '-->';
				//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 + '<!--' + text.replace(/^\s*/mg, 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('');
    }        
        function btnFormat_click()
        {
            var $ = document.getElementById;
            $('output').value = formatXml($('input').value);
        }

    </script>


</head>

<body>
    <textarea id="input" style="width:100%;height:45%;">
		<a id="test" name="nn"		><b>b</b><c>c</c></a>
	</textarea>
    <div style="margin:0px auto;"><input type="button" id="btnFormat" onclick="btnFormat_click()" value="格式化" style="width:50%;height:10%;"/></div>
    <textarea id="output" style="width:100%;height:45%;"></textarea>

</body>
</html>

深蓝色的忧伤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用正则表达式格式化xml代码

[code="java"] Xml格式化工具 String.prototype.removeLineEnd = function(){ return this.replace(/(\s*?'; //alert(ret); return ret; }).replace(/\r/g,'\n'); ...
复制链接

扫一扫