如何使用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 操作DOM的基本用法分享
Apr 05 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
cache_lite试用
2007/02/14 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
使用Python对SQLite数据库操作
2017/04/06 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
pip安装python库的方法总结
2019/08/02 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
初一生物教学反思
2014/01/18 职场文书
《悯农》教学反思
2014/04/28 职场文书
上党课的心得体会
2014/09/02 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
给领导的感谢信范文
2015/01/23 职场文书
优秀员工自荐书
2015/03/06 职场文书
公司门卫岗位职责
2015/04/13 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS