JavaScript正则表达式

什么是正则表达式

这个问题可以参见很多编程语言都支持正则表达式本文仅仅讨论JavaScript中的正则表达式
创建一个正则表达式

第一种方法
varreg=/pattern/;

第二种方法
varreg=newRegExp('pattern');
正则表达式的exec方法简介

语法
reg.exec(str);

其中str为要执行正则表达式的目标字符串

例如
scripttype="text/javascript"
varreg=/test/;
varstr='testString';
varresult=reg.exec(str);
alert(result);
/script

将会输出test因为正则表达式reg会匹配str(testString)中的test子字符串并且将其返回


我们使用下面的函数来做匹配正则的练习
functionexecReg(reg,str){
varresult=reg.exec(str);
alert(result);
}

函数接受一个正则表达式参数reg和一个目标字符串参数str执行之后会alert出正则表达式与字符串的匹配结果

用这个函数测试上面的例子就是
scripttype="text/javascript"
functionexecReg(reg,str){
varresult=reg.exec(str);
alert(result);
}
varreg=/test/;
varstr='testString';
execReg(reg,str);
/script

上面的例子用正则里的test去匹配字符串里的test实在是很无聊同样的任务用indexOf方法就可以完成了用正则自然是要完成更强大的功能
一片两片三四片落尽正则全不见

上面的小标题翻译成正则就是{1},{2},{3,4},{1,}
c{n}

{1}表示一个的意思

/c{1}/只能匹配一个c

/c{2}/则会匹配两个连续的c

以此类推,

/c{n}/则会匹配n个连续的c

看下面的例子
reg=/c{1}/;
str='cainiao';
execReg(reg,str);

返回结果c

reg=/c{2}/;
str='cainiao';
execReg(reg,str);

返回结果null表示没有匹配成功

reg=/c{2}/;
str='ccVC果冻爽';
execReg(reg,str);

返回结果cc
c{m,n}

c{3,4}的意思是连续的3个c或者4个c

例如
reg=/c{3,4}/;
str='ccVC果冻爽';
execReg(reg,str);

返回结果null表示没有匹配成功

reg=/c{3,4}/;
str='cccTest';
execReg(reg,str);

结果返回ccc

reg=/c{3,4}/;
str='ccccTest';
execReg(reg,str);

结果返回cccc这表明正则会尽量多品牌可3可4的时候它会选择多匹配一个

reg=/c{3,4}/;
str='cccccTest';
execReg(reg,str);

仍然只匹配4个c


由以上例子可以推断出c{m,n}表示m个到n个c且m小于等于n
c{n,}

c{1,}表示1个以上的c例如

reg=/c{1,}/;
str='cainiao';
execReg(reg,str);

结果返回c

reg=/c{1,}/;
str='cccccTest';
execReg(reg,str);

返回ccccc再次说明了正则表达式会尽量多地匹配

reg=/c{2,}/;
str='cainiao';
execReg(reg,str);

结果返回nullc{2,}表示2个以上的c而cainiao中只有1个c


由以上例子可知c{n,}表示最少n个c最多则不限个数

*,+,?

*表示0次或者多次等同于{0,}即

c*和c{0,}是一个意思


+表示一次或者多次等同于{1,}即

c+和c{1,}是一个意思


最后?表示0次或者1次等同于{0,1}即

c?和c{0,1}是一个意思

贪心与非贪心

人都是贪婪的正则也是如此我们在例子reg=/c{3,4}/;str='ccccTest';的例子中已经看到了能匹配四个的时候正则绝对不会去匹配三个上面所介绍的所有的正则都是这样只要在合法的情况下它们会尽量多去匹配字符这就叫做贪心模式

如果我们希望正则尽量少地匹配字符那么就可以在表示数字的符号后面加上一个?组成如下的形式

{n,}?,*?,+?,??,{m,n}?

同样来看一个例子
reg=/c{1,}?/;
str='ccccc';
execReg(reg,str);

返回的结果只有1个c尽管有5个c可以匹配但是由于正则表达式是非贪心模式所以只会匹配一个
/^开头,结尾$/

^表示只匹配字符串的开头看下面的例子

reg=/^c/;
str='维生素c';
execReg(reg,str);

结果为null因为字符串维生素c的开头并不是c所以匹配失败

reg=/^c/;
str='cainiao';
execReg(reg,str);

这次则返回c匹配成功因为cainiao恰恰是以c开头的


与^相反$则只匹配字符串结尾的字符同样看例子

reg=/c$/;
str='cainiao';
execReg(reg,str);

返回null表示正则表达式没能在字符串的结尾找到c这个字符

reg=/c$/;
str='维生素c';
execReg(reg,str);

这次返回的结果是c表明匹配成功

点.

.会匹配字符串中除了换行符\n之外的所有字符例如
reg=/./;
str='cainiao';
execReg(reg,str);

结果显示正则匹配到了字符c

reg=/./;
str='blueidea';
execReg(reg,str);

这次是b

reg=/.+/;
str='blueidea经典论坛好_';
execReg(reg,str);

结果是blueidea经典论坛好_也就是说所有的字符都被匹配掉了包括一个空格一个下滑线和一个破折号

reg=/.+/;
reg=/.+/;
str='bbs.blueidea.com';
execReg(reg,str);

同样直接返回整个字符串bbs.blueidea.com可见.也匹配.本身

reg=/^./;
str='\ncainiao';
execReg(reg,str);

结果是null终于失败了正则要求字符串的第一个字符不是换行但是恰恰字符是以\n开始的

二选一正则表达式中的或|

b|c表示匹配b或者c

例如
reg=/b|c/;
str='blueidea';
execReg(reg,str);

结果是b

reg=/b|c/;
str='cainiao';
execReg(reg,str);

结果是c

reg=/^b|c.+/;
str='cainiao';
execReg(reg,str);

匹配掉整个cainiao

reg=/^b|c.+/;
str='bbs.blueidea.com';
execReg(reg,str);

结果只有一个b而不是整个字符串因为上面正则表达式的意思是匹配开头的b或者是c.+
括号
reg=/^(b|c).+/;
str='bbs.blueidea.com';
execReg(reg,str);

这次的结果是整个串bbs.blueidea.com机上上面的括号这后这个正则的意思是如果字符串的开头是b或者c那么匹配开头的b或者c以及其后的所有的非换行字符

如果你也实验了的话会发现返回的结果后面多出来一个,b这是()内的b|c所匹配的内容我们在正则表达式内括号里写的内容会被认为是子正则表达式所匹配的结果也会被记录下来供后面使用我们暂且不去理会这个特性

字符集合[abc]

[abc]表示a或者b或者c中的任意一个字符例如
reg=/^[abc]/;
str='bbs.blueidea.com';
execReg(reg,str);

返回结果是b

reg=/^[abc]/;
str='test';
execReg(reg,str);

这次的结果就是null了


我们在字字符集合中使用如下的表示方式:[a-z],[A-Z],[0-9]分别表示小写字母大写字母数字例如

reg=/^[a-zA-Z][a-zA-Z0-9_]+/;
str='test';
execReg(reg,str);

结果是整个test正则的意思是开头必须是英文字母后面可以是英文字母或者数字以及下划线

反字符集合[^abc]

^在正则表达式开始部分的时候表示开头的意思例如/^c/表示开头是c但是在字符集和中它表示的是类似非的意思例如[^abc]就表示不能是ab或者c中的任何一个例如
reg=/[^abc]/;
str='blueidea';
execReg(reg,str);

返回的结果是l因为它是第一个非abc的字符即第一个b没有匹配同样
reg=/[^abc]/;
str='cainiao';
execReg(reg,str);

则返回i前两个字符都是[abc]集合中的

由此我们可知[^0-9]表示非数字[^a-z]表示非小写字母一次类推

边界与非边界

\b表示的边界的意思也就是说只有字符串的开头和结尾才算数例如/\bc/就表示字符串开始的c或者是结尾的c看下面的例子

reg=/\bc/;
str='cainiao';
execReg(reg,str);

返回结果c匹配到了左边界的c字符

reg=/\bc/;
str='维生素c';
execReg(reg,str);

仍然返回c不过这次返回的是右侧边界的c

reg=/\bc/;
str='bcb';
execReg(reg,str);

这次匹配失败因为bcb字符串中的c被夹在中间既不在左边界也不再右边界


与\b对应\B表示非边界例如

reg=/\Bc/;
str='bcb';
execReg(reg,str);

这次会成功地匹配到bcb中的c然而

reg=/\Bc/;
str='cainiao';
execReg(reg,str);

则会返回null因为\B告诉正则只匹配非边界的c

数字与非数字

\d表示数字的意思相反\D表示非数字例如
reg=/\d/;
str='cainiao8';
execReg(reg,str);

返回的匹配结果为8因为它是第一个数字字符

reg=/\D/;
str='cainiao8';
execReg(reg,str);

返回c第一个非数字字符

空白

\f匹配换页符\n匹配换行符\r匹配回车\t匹配制表符\v匹配垂直制表符

\s匹配单个空格等同于[\f\n\r\t\v]例如

reg=/\s.+/;
str='ThisisatestString.';
execReg(reg,str);

返回isatestString.正则的意思是匹配第一个空格以及其后的所有非换行字符


同样\S表示非空格字符
reg=/\S+/;
str='ThisisatestString.';
execReg(reg,str);

匹配结果为This当遇到第一个空格之后正则就停止匹配了

单词字符

\w表示单词字符等同于字符集合[a-zA-Z0-9_]例如
reg=/\w+/;
str='blueidea';
execReg(reg,str);

返回完整的blueidea字符串因为所有字符都是单词字符

reg=/\w+/;
str='.className';
execReg(reg,str);

结果显示匹配了字符串中的className只有第一个.唯一的非单词字符没有匹配

reg=/\w+/;
str='中文如何';
execReg(reg,str);

试图用单词字符去匹配中文自然行不通了返回null


\W表示非单词字符等效于[^a-zA-Z0-9_]
reg=/\W+/;
str='中文如何';
execReg(reg,str);

返回完整的字符串因为无论是中文和都算作是非单词字符

反向引用

形式如下/(子正则表达式)\1/

依旧用例子来说明

1.
reg=/\w/;
str='blueidea';
execReg(reg,str);

返回b

2.
reg=/(\w)(\w)/;
str='blueidea';
execReg(reg,str);

返回bl,b,l

bl是整个正则匹配的内容b是第一个括号里的子正则表达式匹配的内容l是第二个括号匹配的内容

3.
reg=/(\w)\1/;
str='blueidea';
execReg(reg,str);

则会返回null这里的\1就叫做反向引用它表示的是第一个括号内的字正则表达式匹配的内容在上面的例子中第一个括号里的(\w)匹配了b因此\1就同样表示b了在余下的字符串里自然找不到b了

与第二个例子对比就可以发现\1是等同于第1个括号匹配的内容而不是第一个括号的内容

reg=/(\w)\1/;
str='bbs.blueidea.com';
execReg(reg,str);

这个正则则会匹配到bb


同样前面有几个子正则表达式我们就可以使用几个反向引用例如
reg=/(\w)(\w)\2\1/;
str='woow';
execReg(reg,str);

会匹配成功因为第一个括号匹配到w第二个括号匹配到o而\2\1则表示ow恰好匹配了字符串的最后两个字符

括号2

前面我们曾经讨论过一次括号的问题见下面这个例子
reg=/^(b|c).+/;
str='bbs.blueidea.com';
execReg(reg,str);

这个正则是为了实现只匹配以b或者c开头的字符串一直匹配到换行字符但是上面我们已经看到了可以使用\1来反向引用这个括号里的子正则表达式所匹配的内容而且exec方法也会将这个字正则表达式的匹配结果保存到返回的结果中
不记录子正则表达式的匹配结果

使用形如(?:pattern)的正则就可以避免保存括号内的匹配结果例如
reg=/^(?:b|c).+/;
str='bbs.blueidea.com';
execReg(reg,str);

可以看到返回的结果不再包括那个括号内的字正则表达式多匹配的内容

同理反向引用也不好使了
reg=/^(b|c)\1/;
str='bbs.blueidea.com';
execReg(reg,str);

返回bb,bbb是整个正则表达式匹配的内容而b是第一个子正则表达式匹配的内容
reg=/^(?:b|c)\1/;
str='bbs.blueidea.com';
execReg(reg,str);

返回null由于根本就没有记录括号内匹配的内容自然没有办法反向引用了

正向预查

形式(?=pattern)

所谓正向预查意思就是要匹配的字符串后面必须紧跟着pattern

我们知道正则表达式/cainiao/会匹配cainiao同样也会匹配cainiao9中的cainiao但是我们可能希望cainiao只能匹配cainiao8中的菜鸟这时候就可以像下面这样写/cainiao(?=8)/看两个实例
reg=/cainiao(?=8)/;
str='cainiao9';
execReg(reg,str);

返回null

reg=/cainiao(?=8)/;
str='cainiao8';
execReg(reg,str);

匹配cainiao

需要注意的是括号里的内容并不参与真正的匹配只是检查一下后面的字符是否符合要求而已例如上面的正则返回的是cainiao而不是cainiao8


再来看两个例子
reg=/blue(?=idea)/;
str='blueidea';
execReg(reg,str);

匹配到blue而不是blueidea

reg=/blue(?=idea)/;
str='bluetooth';
execReg(reg,str);

返回null因为blue后面不是idea

reg=/blue(?=idea)/;
str='bluetoothidea';
execReg(reg,str);

同样返回null

?!

形式(?!pattern)和?=恰好相反要求字符串的后面不能紧跟着某个pattern还拿上面的例子
reg=/blue(?!idea)/;
str='blueidea';
execReg(reg,str);

返回null因为正则要求blue的后面不能是idea

reg=/blue(?!idea)/;
str='bluetooth';
execReg(reg,str);

则成功返回blue

匹配元字符

首先要搞清楚什么是元字符呢我们之前用过*,+,?之类的符号它们在正则表达式中都有一定的特殊含义类似这些有特殊功能的字符都叫做元字符例如
reg=/c*/;

表示有任意个c但是如果我们真的想匹配c*这个字符串的时候怎么办呢只要将*转义了就可以了如下
reg=/c\*/;
str='c*';
execReg(reg,str);

返回匹配的字符串c*


同理要匹配其他元字符只要在前面加上一个\就可以了

正则表达式的修饰符
全局匹配修饰符g

形式/pattern/g

例子reg=/b/g;

后面再说这个g的作用先看后面的两个修饰符
不区分大小写修饰符i

形式/pattern/i

例子
varreg=/b/;
varstr='BBS';
execReg(reg,str);

返回null因为大小写不符合

varreg=/b/i;
varstr='BBS';
execReg(reg,str);

匹配到B这个就是i修饰符的作用了
行首行尾修饰符m

形式/pattern/m

m修饰符的作用是修改^和$在正则表达式中的作用让它们分别表示行首和行尾例如
varreg=/^b/;
varstr='test\nbbs';
execReg(reg,str);

匹配失败因为字符串的开头没有b字符但是加上m修饰符之后
varreg=/^b/m;
varstr='test\nbbs';
execReg(reg,str);

匹配到b因为加了m修饰符之后^已经表示行首由于bbs在字符串第二行的行首所以可以成功地匹配
exec方法详解
exec方法的返回值

exec方法返回的其实并不是匹配结果字符串而是一个对象简单地修改一下execReg函数来做一个实验就可以印证这一点
functionexecReg(reg,str){
varresult=reg.exec(str);
alert(typeofresult);
}
varreg=/b/;
varstr='bbs.bblueidea.com';
execReg(reg,str);

结果显示result的类型是object而且是一个类似数组的对象使用forin可以知道它的属性:indexinput0其中index是表示匹配在原字符串中的索引而input则是表示输入的字符串

至于0则是表示只有一个匹配结果可以用下标0来引用这个匹配结果这个数量可能改变我们可以通过返回值的length属性来得知匹配结果的总数量

根据以上对返回值的分析修改execReg函数如下
functionexecReg(reg,str){
varresult=reg.exec(str);
document.write('index:'+result.index+'br/'
+'input:'+result.input+'br/'
);
for(i=0;iresult.length;i++){
document.write('result['+i+']:'+result[i]+'br/')
}
}

马上来实验一下
varreg=/\w/;
varstr='bbs.bblueidea.com';
execReg(reg,str);

结果如下



输入字符串为bbs.bblueidea.com

匹配的b在原字符串的索引是0

正则的匹配结果为一个b

varreg=/(\w)(\w)(.+)/;
varstr='bbs.bblueidea.com';
execReg(reg,str);

结果为

index:0
input:bbs.bblueidea.com
result[0]:bbs.bblueidea.com
result[1]:b
result[2]:b
result[3]:s.bblueidea.com


由上面两个例子可见返回对象[0]就是整个正则表达式所匹配的内容后续的元素则是各个子正则表达式的匹配内容

exec方法对正则表达式的更新

exec方法在返回结果对象的同时还可能会更新原来的正则表达式这就要看正则表达式是否设置了g修饰符先来看两个例子吧
varreg=/b/;
varstr='bbs.blueidea.com';
execReg(reg,str);
execReg(reg,str);

结果如下

index:0
input:bbs.blueidea.com
result[0]:b
index:0
input:bbs.blueidea.com
result[0]:b

也就是说两次匹配的结果完全一样从索引可以看出来匹配的都是字符串首的b字符

下面看看设置了g的正则表达式表现如何
varreg=/b/g;
varstr='bbs.blueidea.com';
execReg(reg,str);
execReg(reg,str);

结果如下

index:0
input:bbs.blueidea.com
result[0]:b
index:1
input:bbs.blueidea.com
result[0]:b

可以看得出来第二次匹配的是字符串的字符串的第二个b这也就是g修饰符的作用了下面来看exec是如何区别对待g和非g正则表达式的


如果正则表达式没有设置g那么exec方法不会对正则表达式有任何的影响如果设置了g那么exec执行之后会更新正则表达式的lastIndex属性表示本次匹配后所匹配字符串的下一个字符的索引下一次再用这个正则表达式匹配字符串的时候就会从上次的lastIndex属性开始匹配也就是上面两个例子结果不同的原因了

test方法

test方法仅仅检查是否能够匹配str并且返回布尔值以表示是否成功同样建立一个简单的测试函数
functiontestReg(reg,str){
alert(reg.test(str));
}

实例1
varreg=/b/;
varstr='bbs.blueidea.com';
testReg(reg,str);

成功输出true

实例2
varreg=/9/;
varstr='bbs.blueidea.com';
testReg(reg,str);

失败返回false
使用字符串的方法执行正则表达式
match方法

形式str.match(reg);

与正则表达式的exec方法类似该方法同样返回一个类似数组的对象也有input和index属性我们定义如下一个函数用来测试
functionmatchReg(reg,str){
varresult=str.match(reg);
if(result){
document.write('index:'+result.index+'br/'
+'input:'+result.input+'br/'
);
for(i=0;iresult.length;i++){
document.write('result['+i+']:'+result[i]+'br/')
}
}else{
alert('null匹配失败')
}
}

例如
varreg=/b/;
varstr='bbs.blueidea.com';
matchReg(reg,str);

结果如下

index:0
input:bbs.blueidea.com
result[0]:b

可见和exec的结果一样

但是如果正则表达式设置了g修饰符exec和match的行为可就不一样了见下例

index:undefined
input:undefined
result[0]:b
result[1]:b
result[2]:b

设置了g修饰符的正则表达式在完成一次成功匹配后不会停止而是继续找到所有可以匹配到的字符返回的结果包括了三个b不过没有提供input和index这些信息

replace方法

形式str.replace(reg,newstr);

它的作用是将str字符串中匹配reg的部分用newstr部分代码值得注意的是原字符串并不会被修改而是作为返回值被返回例子
varreg=/b/;
varstr='bbs.blueidea.com';
varnewStr=str.replace(reg,'c');
document.write(newStr);

结果为cbs.blueidea.com只有第一个b被替换为c

varreg=/b/g;
varstr='bbs.blueidea.com';
varnewStr=str.replace(reg,'c');
document.write(newStr);

输出ccs.clueidea.com

由于设置了g修饰符所以会替换掉所有的b

varreg=/\w+/g;
varstr='bbs.blueidea.com';
varnewStr=str.replace(reg,'word');
document.write(newStr);

输出

word.word.word
在replace函数中使用$引用子正则表达式匹配内容

就像在正则里我们可以使用\1来引用第一个子正则表达式所匹配的内容一样我们在replace函数的替换字符里也可以使用$1来引用相同的内容

还是来看一个例子吧
varreg=/(\w+).(\w+).(\w+)/;
varstr='bbs.blueidea.com';
varnewStr=str.replace(reg,'$1.$1.$1');
document.write(newStr);

输出的结果为

bbs.bbs.bbs

首先我们知道第一个子正则表达式匹配到了bbs那么$1也就代表bbs了其后我们把替换字符串设置为'$1.$1.$1',其实也就是bbs.bbs.bbs同理$2就是blueidea$3就是com


在来看一个例子颠倒空格前后两个单词的顺序
varreg=/(\w+)\s(\w+)/;
varstr='cainiaogaoshou';
varnewStr=str.replace(reg,'$2$1');
document.write(newStr);

结果为gaoshoucainiao也就是空格前后的单词被调换顺序了


由于在替换文本里$有了特殊的含义所以我们如果想要是用$这个字符的话需要写成$$例如
varreg=/(\w+)\s(\w+)/;
varstr='cainiaogaoshou';
varnewStr=str.replace(reg,'$$$$');
document.write(newStr);

结果为$$

search方法和split方法

同样字符串的search方法和split方法中也可以使用正则表达式形式如下

str.search(reg);

search返回正则表达式第一次匹配的位置例子
varreg=/idea/;
varstr='blueidea';
varpos=str.search(reg);
document.write(pos);

结果为4

下面的例子找出第一个非单词字符
varreg=/\W/;
varstr='bbs.blueidea.com';
varpos=str.search(reg);
document.write(pos);

结果为3也就是那个点.的位置

str.split(reg,seprator);
split返回分割后的数组例如
varreg=/\W/;
varstr='bbs.blueidea.com';
vararr=str.split(reg);
document.write(arr);

结果为bbs,blueidea,com可见数组被非单词字符分为了有三个元素的数组

varreg=/\W/;
varstr='http://www.baidu.com/';
vararr=str.split(reg);
document.write(arr.length+'br/');
document.write(arr);

结果为

7
http,,,www,baidu,com,

可见字符串被分为了有7个元素的数组其中包括了三个为空字符串的元素