如何使用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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
js对象基础实例分析
Jan 13 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
k8s node节点重新加入master集群的实现
Feb 22 Javascript
如何让vue长列表快速加载
Mar 29 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
做网页的一些技巧
2007/02/01 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
Bootstrap Table从零开始
2017/06/30 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
python重试装饰器示例
2014/02/11 Python
Python探索之修改Python搜索路径
2017/10/25 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python实现网页自动签到功能
2019/01/21 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
写给女朋友的检讨书
2014/01/28 职场文书
《画风》教学反思
2014/04/16 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年客房部工作总结
2014/11/22 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书