如何使用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实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
解析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 中include()与require()的对比
2006/10/09 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
Python 深入理解yield
2008/09/06 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
服务理念口号
2014/06/11 职场文书
2014年计生工作总结
2014/11/21 职场文书
2016公司年会通知范文
2015/04/25 职场文书
书法社团活动总结
2015/05/07 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
工作后的感想
2015/08/07 职场文书
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server