如何使用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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
解析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
谈谈 PHP7新增功能
2015/12/16 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python使用zip将list转为json的方法
2018/12/31 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
校领导推荐信
2013/11/01 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
二婚主持词
2015/06/30 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL