如何使用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 相关文章推荐
Javascript中的高阶函数介绍
Mar 15 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
js实现课堂随机点名系统
Nov 21 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代码
2012/07/17 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
资产评估专业学生的自我鉴定
2013/11/14 职场文书
双方协议书
2014/04/22 职场文书
团委竞选演讲稿
2014/04/24 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫