`

使用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>

分享到:
评论

相关推荐

    如何使用Javascript正则表达式来格式化XML内容

    综合来看,这篇文章主要介绍了如何使用Javascript正则表达式对XML内容进行格式化,具体步骤包括去除多余空格、处理注释编码、调整格式化缩进、以及还原注释并解码。这些步骤共同作用,使得原本混乱的XML文件变得格式...

    正则表达式+xml

    正则表达式(Regular Expression)和XML(eXtensible Markup Language)是IT领域中两种重要的技术。...在实际开发中,了解并熟练掌握正则表达式和XML的使用,能帮助我们更好地处理文本数据和结构化信息。

    正则表达式经典实例

    2. **多语言支持**:书中详细阐述了如何在不同的编程语言和脚本语言中有效使用正则表达式,帮助读者理解不同语言之间正则表达式的API、语法和行为差异。 3. **实际应用案例**:提供了上百个实用的实例,涵盖文本...

    JS的正则表达式进行验证

    在这些场景下,正则表达式可以帮助开发者检查加载的数据是否符合预期的结构或格式,比如检查JSON数据的完整性,或验证从服务器返回的XML文档中的元素名称。 ### 结论 综上所述,正则表达式在JavaScript中的应用...

    JavaScript 正则表达式 ajax

    本课程重点涵盖了JavaScript的几个关键知识点:正则表达式、AJAX(异步JavaScript和XML)以及相关的编程基础。 正则表达式是JavaScript中用于模式匹配和文本操作的强大工具。它允许程序员通过定义特定的模式来搜索...

    正则表达式计数代码行数

    本教程将详细介绍如何使用正则表达式来计算代码中的普通代码行数、注释行数和空白行数。 首先,我们要理解代码行的分类: 1. 普通代码行:不包含注释或空格的代码行。 2. 注释行:包含编程语言特定的注释标记的行,...

    javascript正则表达式容易被忽略的小问题整理.docx

    - **格式化XML**:使用正则表达式进行XML内容的清洗和格式化,如去除多余空格、换行等。 - **验证邮箱、电话号码**:`/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$`是邮箱验证的常见正则,电话号码验证则根据...

    最新CSS + DIV+正则表达式

    在前端开发中,正则表达式常用于验证表单输入、提取URL、格式化数据等场景。 1. **基本语法**:包括字符集(如\d表示数字,\w表示字母或数字),量词(*、+、?表示重复次数),以及锚点(^表示开头,$表示结尾)等...

    网页抓取 正则表达式 前台处理json对象

    综上所述,这个项目可能涉及到使用网页抓取技术获取网页数据,然后利用正则表达式清洗和解析数据。在前端部分,可能通过AJAX请求获取后端服务的JSON数据,并在页面上进行实时更新和展示。如果涉及到跨域问题,可能...

    xml_format.rar_javascript_xml格式化

    描述中提到这个工具"可用于emeditor插件",意味着它可以作为一个编辑器扩展,帮助用户在emeditor中快速格式化XML文档。emeditor是一款流行的、可定制的文本编辑器,支持多种编程语言和格式,添加这样的插件可以极大...

    正则表达式

    - **文本处理**: 在Python、JavaScript、Java等语言中,正则表达式被用于数据提取、文本清洗和格式化。 - **Web开发**: 在HTML和XML的解析、URL的验证和处理中,正则表达式起着关键作用。 - **数据分析**: 在数据...

    css+DHTML+JS+正则表达式 CHM手册

    正则表达式.chm文件会涵盖基本的正则元字符、量词、分组、预查等概念,以及如何在JavaScript中使用正则表达式进行操作。 这四部分知识构成了Web前端开发的核心基础,通过阅读这些CHM手册,开发者不仅可以深入理解每...

    什么是正则表达式:探索数据世界的搜索工具.docx

    5. **编程语言**:正则表达式被广泛应用于多种编程语言中,如Python、Java、JavaScript等。这些语言都内置了强大的正则表达式引擎,方便开发者进行字符串操作。 #### 四、实例解析 为了更直观地理解正则表达式的...

    Net开发资料,C#,Ajax,正则表达式,过滤字符串

    过滤可以防止SQL注入、XSS攻击,也可以用于数据清洗和格式化。了解何时以及如何使用这些方法对于编写安全且高效的代码至关重要。 综上所述,这个压缩包资料应该对.NET开发者非常有用,它提供了关于C#编程语言、Ajax...

    js正则表达式

    - **构造函数表示法**:使用`new RegExp()`来创建正则表达式对象,例如:`new RegExp('abc')`。 #### 常见元字符及其功能 下面详细介绍了一些常见的正则表达式的元字符及其功能: 1. **特殊字符** - `\b`:匹配...

    js验证收集,正则表达式。

    以上内容涵盖了从文件中提取的关键JavaScript验证和正则表达式知识点,包括IP地址验证、数字验证、时间验证以及其他实用功能。这些技巧对于Web开发人员来说非常有用,可以帮助他们高效地处理用户输入和页面操作。

    CSS、DHTML、XMLDOM、T-SQL、XPath、正则表达式等.chm文件

    **CSS** CSS(Cascading Style Sheets)是用于描述HTML或XML...通过阅读和实践,你可以掌握如何利用CSS美化页面、用DHTML创建动态效果、操作XML文档、编写T-SQL语句、使用XPath导航XML以及运用正则表达式处理字符串。

Global site tag (gtag.js) - Google Analytics