如何使用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 addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
解析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留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
期末学生评语大全
2014/04/24 职场文书
单位租房协议书范本
2014/12/04 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
高中生军训感言
2015/08/01 职场文书