(二)前端必备技能JavaScript正则表达式教程

\w表示单词字符，等同于字符集合[a-zA-Z0-9_]。例如：

1 2 3

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

返回完整的blueidea字符串，因为所有字符都是单词字符。
reg = /\w+/;
str=’.className’;
execReg(reg,str);
结果显示匹配了字符串中的className，只有第一个“.”——唯一的非单词字符没有匹配。

1 2 3

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

试图用单词字符去匹配中文自然行不通了，返回null。
\W表示非单词字符，等效于[^a-zA-Z0-9_]

1 2 3

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

返回完整的字符串，因为，无论是中文和“？”都算作是非单词字符。
反向引用

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

依旧用例子来说明：

1.

1 2 3

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

返回b。

2.

1 2 3

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

返回bl,b,l

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

3.

1 2 3

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

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

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

1 2 3

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

这个正则则会匹配到bb。
同样，前面有几个子正则表达式我们就可以使用几个反向引用。例如：

1 2 3

reg   =   /(\w)(\w)\2\1/ ; str = 'woow' ; execReg (reg ,str ) ;

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

前面我们曾经讨论过一次括号的问题，见下面这个例子：

1 2 3

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

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

不记录子正则表达式的匹配结果

使用形如(?:pattern)的正则就可以避免保存括号内的匹配结果。例如：

1 2 3

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

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

同理，反向引用也不好使了：

1 2 3

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

返回bb,b。bb是整个正则表达式匹配的内容，而b是第一个子正则表达式匹配的内容。

1 2 3

reg   =   /^(?:b|c)\1/ ; str = 'bbs.blueidea.com' ; execReg (reg ,str ) ;

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

形式：(?=pattern)

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

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

1 2 3

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

返回null。

1 2 3

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

匹配cainiao。

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

1 2 3

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

匹配到blue，而不是blueidea。

1 2 3

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

返回null，因为blue后面不是idea。

1 2 3

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

同样返回null。
?!

形式(?!pattern)和?=恰好相反，要求字符串的后面不能紧跟着某个pattern，还拿上面的例子：

1 2 3

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

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

1 2 3

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

则成功返回blue。
匹配元字符

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

reg = /c*/;
表示有任意个c，但是如果我们真的想匹配’c*’这个字符串的时候怎么办呢？只要将*转义了就可以了，如下：

1 2 3

reg   =   /c\*/ ; str = 'c*' ; execReg (reg ,str ) ;

返回匹配的字符串：c*。
同理，要匹配其他元字符，只要在前面加上一个“\”就可以了。
正则表达式的修饰符

全局匹配，修饰符g

形式：/pattern/g

例子：reg = /b/g;

后面再说这个g的作用。先看后面的两个修饰符。

不区分大小写，修饰符i

形式：/pattern/i

例子：

1 2 3

var  reg   =   /b/ ; var  str   =   'BBS' ; execReg (reg ,str ) ;

返回null，因为大小写不符合。

1 2 3

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

匹配到B，这个就是i修饰符的作用了。

行首行尾，修饰符m

形式：/pattern/m

m修饰符的作用是修改^和$在正则表达式中的作用，让它们分别表示行首和行尾。例如：

1 2 3

var  reg   =   /^b/ ; var  str   =   'test\nbbs' ; execReg (reg ,str ) ;

匹配失败，因为字符串的开头没有b字符。但是加上m修饰符之后：

1 2 3

var  reg   =   /^b/m ; var  str   =   'test\nbbs' ; execReg (reg ,str ) ;

匹配到b，因为加了m修饰符之后，^已经表示行首，由于bbs在字符串第二行的行首，所以可以成功地匹配。

exec方法详解

exec方法的返回值

exec方法返回的其实并不是匹配结果字符串，而是一个对象，简单地修改一下execReg函数，来做一个实验就可以印证这一点：

1 2 3 4 5 6 7

function  execReg (reg ,str ) { var  result   =  reg. exec (str ) ; alert ( typeof  result ) ; } var  reg   =   /b/ ; var  str = 'bbs.bblueidea.com' ; execReg (reg ,str ) ;

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

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

根据以上对返回值的分析，修改execReg函数如下：

1 2 3 4 5 6 7 8 9 10 11

function  execReg (reg ,str ) { var  result   =  reg. exec (str ) ; document. write ( 'index:' +result. index + ' ' + 'input:' +result. input + ' ' ) ; for (i = 0 ;i document. write ( 'result[' +i + ']:' +result [i ] + ' ' ) } }

马上来实验一下：

1 2 3

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

结果如下：

index:0
input:bbs.bblueidea.com
result[0]:b
输入字符串为bbs.bblueidea.com；

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

正则的匹配结果为一个，b；

1 2 3

var  reg   =   /(\w)(\w)(.+)/ ; var  str = '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修饰符。先来看两个例子吧：

1 2 3 4

var  reg   =   /b/ ; var  str   =   '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的正则表达式表现如何：

1 2 3 4

var  reg   =   /b/g ; var  str   =   '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，并且返回布尔值以表示是否成功。同样建立一个简单的测试函数：

1 2 3

function  testReg (reg ,str ) { alert (reg. test (str ) ) ; }

实例1

1 2 3

var  reg   =   /b/ ; var  str   =   'bbs.blueidea.com' ; testReg (reg ,str ) ;

成功，输出true。

实例2

1 2 3

var  reg   =   /9/ ; var  str   =   'bbs.blueidea.com' ; testReg (reg ,str ) ;

失败，返回false。

使用字符串的方法执行正则表达式

match方法

形式：str.match(reg);

与正则表达式的exec方法类似，该方法同样返回一个类似数组的对象，也有input和index属性。我们定义如下一个函数用来测试：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function  matchReg (reg ,str ) { var  result   =  str. match (reg ) ; if (result   ) { document. write ( 'index:' +result. index + ' ' + 'input:' +result. input + ' ' ) ; for (i = 0 ;i document. write ( 'result[' +i + ']:' +result [i ] + ' ' ) } } else { alert ( 'null：匹配失败！' ) } }

例如：

1 2 3

var  reg   =   /b/ ; var  str   =   '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,’new str’);

它的作用是将str字符串中匹配reg的部分用’’new str”部分代码，值得注意的是原字符串并不会被修改，而是作为返回值被返回。例子：

1 2 3 4

var  reg   =   /b/ ; var  str   =   'bbs.blueidea.com' ; var  newStr   =  str. replace (reg , 'c' ) ; document. write (newStr ) ;

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

1 2 3 4

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

输出ccs.clueidea.com

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

1 2 3 4

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

输出：

word.word.word。

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

还是来看一个例子吧：

1 2 3 4

var  reg   =   /(\w+).(\w+).(\w+)/ ; var  str   =   'bbs.blueidea.com' ; var  newStr   =  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。
在来看一个例子，颠倒空格前后两个单词的顺序。

1 2 3 4

var  reg   =   /(\w+)\s(\w+)/ ; var  str   =   'cainiao gaoshou' ; var  newStr   =  str. replace (reg , '$2 $1' ) ; document. write (newStr ) ;

结果为：gaoshou cainiao，也就是空格前后的单词被调换顺序了。
由于在替换文本里$有了特殊的含义，所以我们如果想要是用$这个字符的话，需要写成$$，例如：

1 2 3 4

var  reg   =   /(\w+)\s(\w+)/ ; var  str   =   'cainiao gaoshou' ; var  newStr   =  str. replace (reg , '$$ $$' ) ; document. write (newStr ) ;

结果为：$ $。
search方法和split方法

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

str.search(reg);

search返回正则表达式第一次匹配的位置。例子：

1 2 3 4

var  reg   =   /idea/ ; var  str   =   'blueidea' ; var  pos   =  str. search (reg ) ; document. write (pos ) ;

结果为4。

下面的例子找出第一个非单词字符：

1 2 3 4

var  reg   =   /\W/ ; var  str   =   'bbs.blueidea.com' ; var  pos   =  str. search (reg ) ; document. write (pos ) ;

结果为3，也就是那个点“.”的位置。
str.split(reg,’seprator’);
split返回分割后的数组，例如：

1 2 3 4

var  reg   =   /\W/ ; var  str   =   'bbs.blueidea.com' ; var  arr   =  str. split (reg ) ; document. write (arr ) ;

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

1 2 3 4 5

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

结果为：7
http,,,www,baidu,com,

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