使用JavaScript正则表达式实现XML自动格式化

XML格式化背景与工具介绍

在使用Emeditor查看XML文档时，常因格式混乱导致内容难以阅读。为此，可以使用一个Emeditor宏来自动完成XML的格式化工作。相关工具包的下载链接如下：

(文件大小为1,021.00 bytes)

JavaScript格式化XML核心逻辑

以下是基于网页版JavaScript实现的XML格式化代码示例。

<!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)
    {
//去掉多余的空格
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) + '-->';
//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%;"></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>