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


Posted in Javascript onJuly 04, 2013

使用得是Emeditor ,在看XML文档时,总是因为格式混乱而看不清。这个是一个Emeditor宏来自动格式化XML。下载:formatXml.rar (1,021.00 bytes)
下面这段是这个网页版的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 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
浅谈Vue.set实际上是什么
Oct 17 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
解析Jquery取得iframe中元素的几种方法
Jul 04 #Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 #Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 #Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 #Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 #Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 #Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 #Javascript
You might like
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
一个简单的js树形菜单
2011/12/09 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
Python的标准模块包json详解
2017/03/13 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python将回车作为输入内容的实例
2018/06/23 Python
Django实现分页功能
2018/07/02 Python
python求最大连续子数组的和
2018/07/07 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python异常处理和日志处理方式
2019/12/24 Python
python定时截屏实现
2020/11/02 Python
程序员经常用到的UNIX命令
2015/04/13 面试题
房产销售经理职责
2013/12/20 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
产品促销活动策划书
2014/01/15 职场文书
留学推荐信范文
2014/05/10 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
2019入党申请书格式
2019/06/25 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android