精通正则表达式（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执行多少次，都返回第一个匹配
View Code
1.2test
test(str)，判断字符串str是否匹配表达式，返回一个布尔值。例如：
var regx=/user\d+/g;
var flag=regx.test(“user12dd”);
flag的值为true。
View Code
1.3match
match(expr)，返回与expr相匹配的一个字符串数组，如果没有加参数g，则返回第一个匹配，加入参数g则返回所有的匹配 例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.match(regx);
rs的值为：{user1,user3}
View Code
1.4search
View Code
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
View Code
1.6split
split(expr)，将字符串以匹配expr的部分做分割，返回一个数组，而且表达式是否附加参数g都没有关系，结果是一样的。 例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.split(regx);
rs的值为：{3userddd,45}
View Code
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。
View Code
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]
3实战
3.1
答案（不止一个，这只是其中一个）：
View Code
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-'}满足条件。
答案：
View Code
希望对大家有所帮助吧！
标签: 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' ]);
});
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于精通正则表达式（JavaScript）的详细内容...