如何使用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功能的正确方法(译文)
Apr 12 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
JavaScript实现筛选数组
Mar 02 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
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
CI框架常用函数封装实例
2016/11/21 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
node跨域请求方法小结
2017/08/25 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
vue实现计算器功能
2020/02/22 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python插入排序算法的实现代码
2013/11/21 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
浅析Django中关于session的使用
2019/12/30 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
什么是属性访问器
2015/10/26 面试题
数字化校园建设方案
2014/05/03 职场文书
信息合作协议书
2014/10/09 职场文书
工作表现证明
2015/06/15 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python