如何使用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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JavaScript的==运算详解
Jul 20 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
webpack的pitching loader详解
Sep 23 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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
Zerg建筑一览
2020/03/14 星际争霸
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jQuery 1.0.2
2006/10/11 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
js实现漫天星星效果
2017/01/19 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
常见的python正则用法实例讲解
2016/06/21 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
植树节活动总结
2014/04/30 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL