如何使用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 学习笔记 选择器之五
Jul 23 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
node.js基础知识汇总
2020/08/25 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Python中操作MySQL入门实例
2015/02/08 Python
python统计日志ip访问数的方法
2015/07/06 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python帮你识破双11的套路
2019/11/11 Python
python实现单机五子棋
2020/08/28 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
2014小学植树节活动总结
2014/03/10 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers