精通正则表达式（JavaScript）

　在上一篇精通正则表达式（正则引擎）中大概的讲解了一下正则引擎的相关知识，了解了它的匹配原理，接下来我们在js这门语言里面来详细的使用一下。

　　在js中常用于字符串处理、表单验证、处理DOM模型、纯编程逻辑等。js中的正则表达式使用方式提供了两种：普通方式；构造函数方式。

　　普通方式

　　普通方式：var reg=/表达式/附加参数
　　表达式：一个字符串，代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则。
　　附加参数：用来扩展表达式的含义，目前主要有三个参数：
　　　　g：代表可以进行全局匹配。
　　　　i：代表不区分大小写匹配。
　　　　m：代表可以进行多行匹配。
　　上面三个参数可以任意组合，代表符合含义，当然也可以不加参数。
　　例如：
　　　　var reg1=/[0-9]*b/;
　　　　var reg2=/[a-z]+f/g;
　　　　var reg3=/^[a-z]/i;
　　　　var reg4=/^[a-z]/gm;

　　构造函数方式　

　　构造函数方式：var reg=new RegExp(“表达式”,”附加参数”);
　　其中的表达式和附加参数和普通方式一样。
　　例如：var reg1=new RegExp(“a|b”);
　　　　var reg2=new RegExp(“[a-z]$”,”i”);

　　普通方式的的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个js变量，例如：
　　　　var value=“abc”;
　　　　var reg=new RegExp(value,”i”);

　　如下为js的其他部分元字符：

　　1、表达式操作

　　1.1exec

　　exec(str)，返回str中与表达式相匹配的第一个字符串，而且以数组的形式表现，当然如果表达式中含有捕捉用的小括号，则返回的数组中也可能含有()中的匹配字符串，例如：
　　　　var regx=/\d+/; 
　　　　var rs=regx.exec(“3432ddf53”); 
　　返回的rs值为：{3432}
　　　　var regx2=new RegExp(“ab(\d+)c”); 
　　　　var rs2=regx2.exec(“ab234c44”); 
　　返回的rs值为：{ab234c,234}

　　另外，如果有多个合适的匹配，则第一次执行exec返回一个第一个匹配，此时继续执行exec，则依次返回第二个第三个匹配。例如： 
　　　　var regx=/user\d/g;
　　　　var rs=regx.exec(“ddduser1dsfuser2dd”); 
　　　　var rs1=regx.exec(“ddduser1dsfuser2dd”); 
　　则rs的值为{user1}，rs的值为{user2}，当然注意regx中的g参数是必须的，否则无论exec执行多少次，都返回第一个匹配　　

　　1.2test　

　　test(str)，判断字符串str是否匹配表达式，返回一个布尔值。例如：
　　　　var regx=/user\d+/g; 
　　　　var flag=regx.test(“user12dd”); 
　　flag的值为true。

　　1.3match　

　　match(expr)，返回与expr相匹配的一个字符串数组，如果没有加参数g，则返回第一个匹配，加入参数g则返回所有的匹配 例子：
　　　　var regx=/user\d/g;
　　　　var str=“user13userddduser345”; 
　　　　var rs=str.match(regx); 
　　rs的值为：{user1,user3}　

　　1.4search　

　　search(expr)，返回字符串中与expr相匹配的第一个匹配的index值。 例子：
　　　　var regx=/user\d/g; 
　　　　var str=“user13userddduser345”; var rs=str.search(regx); 
　　rs的值为：0

　　1.5replace　

　　replace(expr,str)，将字符串中匹配expr的部分替换为str。另外在replace方法中，str中可以含有一种变量符号$，格式为$n，代表匹配中被记住的第n的匹配字符串（注意小括号可以记忆匹配）。 例子1： 
　　　　var regx=/user\d/g; 
　　　　var str=“user13userddduser345”;
　　　　var rs=str.replace(regx,”00”); 
　　rs的值为：003userddd0045　

　　例子2：
　　　　var regx=/u(se)r\d/g; 
　　　　var str=“user13userddduser345”; var rs=str.replace(regx,”$1”); 
　　rs的值为：se3userdddse45　

　　对于replace(expr,str)方法还要特别注意一点，如果expr是一个表达式对象则会进行全局替换（此时表达式必须附加参数g，否则也只是替换第一个匹配），如果expr是一个字符串对象，则只会替换第一个匹配的部分，例如： 
　　　　var regx=“user”; 
　　　　var str=“user13userddduser345”; 
　　　　var rs=str.replace(regx,”00”); 
　　rs的值为： 0013userddduser345

　　1.6split　

　　split(expr)，将字符串以匹配expr的部分做分割，返回一个数组，而且表达式是否附加参数g都没有关系，结果是一样的。 例子：
　　　　var regx=/user\d/g; 
　　　　var str=“user13userddduser345”; 
　　　　var rs=str.split(regx); 
　　rs的值为：{3userddd,45}

　　2、表达式相关属性

　　2.1lastIndex　　

　　lastIndex，返回开始下一个匹配的位置，注意必须是全局匹配（表达式中带有g参数）时，lastIndex才会有不断返回下一个匹配值，否则该值为总是返回第一个下一个匹配位置，例如： 　　　　var regx=/user\d/;
　　　　var rs=regx.exec(“sdsfuser1dfsfuser2”); 
　　　　var lastIndex1=regx.lastIndex; rs=regx.exec(“sdsfuser1dfsfuser2”);
　　　　var lastIndex2=regx.lastIndex; rs=regx.exec(“sdsfuser1dfsfuser2”); 
　　　　var lastIndex3=regx.lastIndex; 
　　上面lastIndex1为0，第二个lastIndex2也为0，第三个也是0；如果regx=/user\d/g，则第一个为9，第二个为18，第三个为0。

　　2.2source　

　　source，返回表达式字符串自身。例如：
　　　　var regx=/user\d/; 
　　　　var rs=regx.exec(“sdsfuser1dfsfuser2”); 
　　　　var source=regx.source; 
　　source的值为user\d

　　2.3index　　

　　index，返回当前匹配的位置。例如： 
　　　　var regx=/user\d/; 
　　　　var rs=regx.exec(“sdsfuser1dfsfuser2”); 
　　　　var index1=rs.index; rs=regx.exec(“sdsfuser1dfsfuser2”); 
　　　　var index2=rs.index; 
　　　　rs=regx.exec(“sdsfuser1dfsfuser2”); 
　　　　var index3=rs.index; 
　　index1为4，index2为4，index3为4，如果表达式加入参数g，则index1为4，index2为13，index3会报错（index为空或不是对象）。

　　2.4input

　　input，用于匹配的字符串。例如： 
　　　　var regx=/user\d/; 
　　　　var rs=regx.exec(“sdsfuser1dfsfuser2”); 
　　　　var input=rs.input; 
　　input的值为sdsfuser1dfsfuser2。

　　2.5[0]

　　[0]，返回匹配结果中的第一个匹配值，对于match而言可能返回一个多值的数字，则除了[0]外，还可以取[1]、[2]等等。例如： 
　　　　var regx=/user\d/g; 
　　　　var rs=regx.exec(“sdsfuser1dfsfuser2”); var value1=rs[0]; 　　　　　　　　　　　rs=regx.exec(“sdsfuser1dfsfuser2”); 
　　　　var value2=rs[0]; 
　　value1的值为user1,value2的值为user2

　　3实战

　　3.1　　

　　请将下面的字符串转换为对应的字符串：（我们公司一个面试题）
　　　　t0.supermap.com/tiles/4/3/2.png
　　　　t4.supermap.com/tiles/m4/4/3.jpg
　　　　a7.supermap.com/tiles/5/m4/6.png
　　转换为对应的
　　　　m0.iclient.com/tiles.png?x=4&y=3&z=2
　　　　m4.iclient.com/tiles.jpg?x=m4&y=4&z=3
　　　　m7.iclient.com/tiles.png?x=5&y=m4&z=6

 　　答案（不止一个，这只是其中一个）：

　　3.2

　　前几天遇到一个朋友在群里面问一个问题：他有形如："[{chk:'-15-13-2-5-'},{chk:'-1-13-4-5-2-'},{chk:'-1-2-5-'}]"这样的很长的字符串数据，在界面用户选择了"-5-"、"-2-"等里面的若干个，那么希望获取出"{chk:'...'}"这样的数据，里面必须同时存在用户选择的所有选项。不如用户在界面勾选了"-5-"和"-4-"，那么最后只有{chk:'-1-13-4-5-2-'}满足条件。

　　答案：　

　　希望对大家有所帮助吧！

 

 

 

标签: js, 正则表达式

js自定义事件的简单实现

在写这段代码之后，本人使用过jQuery这个库，一直对jQuery的自定义事件有疑惑，就看了看jQuery的源码，廓然开朗。

jQuery代码实现和触发自定义实现如下： 

jQuery的定义方式：
$(dom).bind('data-change',function(){//dom为一个html元素
      alert("asd");     
})

jQuery使用方式 : 
$(dom).trigger('init-change',[data]);

但内部机制是怎么触发这个事件的呢？原来jQuery通过的是缓存这些自定义事件,我就自己实现了一把，下面是我的代码:

var Dojo = function(selecter,context){
    return new this.init(selecter,context);//创建一个新的对象
}
Dojo.prototype.event = {};
Dojo.prototype.init  = function(selecter,context){
    this.gid = 0;
    var dom  = this.getDom(selecter); 
    this.dom = dom;
    this.dom.gid = this.gid++;
    return this;
}
Dojo.prototype.getDom =  function(selecter){
    var dom = document.getElementById(selecter) || null;
    return [dom];
}
Dojo.prototype.addEvent = function(eventName,fn){//存放自定义的事件
    if(!this.event[eventName]){
        this.event[eventName] = [];
    }
    this.event[eventName].push( fn );
}
//Dojo工具类
Dojo.Util = {};
Dojo.Util.isFunction = function(fn){
    return Object.prototype.toString.call( fn ).slice(8,-1) === 'Function';
}
Dojo.Util.ToArray = function(args){
    return Array.prototype.slice.call( args , 0 );
}
//简单实现事件的绑定
Dojo.prototype.click = function(fn){
    this.event[this.dom.gid] = this.event[this.dom.gid] || [];
    var i = j = 0;
    var self = this;
    if(Dojo.Util.isFunction( fn )){
        for(;i<this.dom.length;i++){
            this.dom[i].addEventListener('click' , function(e,data){
                fn.call(self,e,data);        
            } ,false);
        }
    }

}
Dojo.prototype.trigger = function(eventName,data){
    var i = 0;
    if(!this.event[eventName]){
        return;
    }
    for(len = this.event[eventName].length;i<len;i++){
        this.event[eventName][i].apply(this.dom,data);
    }
    return this;
}
Dojo.prototype.init.prototype = Dojo.prototype;
var dom = new Dojo('dom');
//为创建的dom对象增加自定义函数
//这里面就增加了两个一样的事件
dom.addEvent("data-change",function(){
    console.log(arguments);        
});
dom.addEvent("data-change",function(){
    var arr;
    arr = Dojo.Util.ToArray(arguments);  
    alert(arr);        
});
//click的时候触发事件
dom.click(function(e){
    this.trigger("data-change",['a','c','d']);
});