如何使用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方法和技巧大全
Dec 27 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
javascript元素动态创建实现方法
May 13 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
JS模拟实现京东快递单号查询
Nov 30 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
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
django如何自己创建一个中间件
2019/07/24 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
投标诚信承诺书
2014/05/26 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python