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

创建一个正则表达式

第一种方法:

1
var  reg   =   /pattern/ ;

第二种方法:

1
var  reg   =   new  RegExp ( 'pattern' ) ;

正则表达式的exec方法简介

语法:

1
reg. exec (str ) ;

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

例如:

1
2
3
4
5
6
7
<script type = "text/javascript" >
// <![CDATA[
  var  reg   =   /test/ ;   var  str   =   'testString' ;  
var  result   =   reg. exec (str ) ;  
alert (result ) ;
// ]]>
</script >

将会输出test,因为正则表达式reg会匹配str(‘testString’)中的’test’子字符串,并且将其返回。
我们使用下面的函数来做匹配正则的练习:

1
2
3
4
function  execReg (reg ,str ) {
var  result   =  reg. exec (str ) ;
alert (result ) ;
}

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

用这个函数测试上面的例子就是:

1
2
3
4
5
6
7
8
9
<script type = "text/javascript" >
// <![CDATA[
  function   execReg (reg ,str ) {   
var  result   =   reg. exec (str ) ;   
alert (result ) ;  
}  
var  reg   =   /test/ ;   var  str   =   '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。

看下面的例子:

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

返回结果c

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

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

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

返回结果cc。

c{m,n}

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

例如

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

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

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

结果返回ccc。

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

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

1
2
3
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。例如:

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

结果返回c。

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

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

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

结果返回null,c{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}?

同样来看一个例子:

1
2
3
reg   =   /c{1,}?/ ;
str = 'ccccc' ;
execReg (reg ,str ) ;

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

/^开头,结尾$/

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

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

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

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

这次则返回c,匹配成功,因为cainiao恰恰是以c开头的。
与^相反,$则只匹配字符串结尾的字符,同样,看例子:

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

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

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

这次返回的结果是c,表明匹配成功。
点’.’

‘.’会匹配字符串中除了换行符\n之外的所有字符,例如

1
2
3
reg   =   /./ ;
str = 'cainiao' ;
execReg (reg ,str ) ;

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

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

这次是b。

1
2
3
reg   =   /.+/ ;
str = 'blueidea——经典论坛 好_。' ;
execReg (reg ,str ) ;

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

1
2
3
4
reg   =   /.+/ ;
reg   =   /.+/ ;
str = 'bbs.blueidea.com' ;
execReg (reg ,str ) ;

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

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

结果是null,终于失败了,正则要求字符串的第一个字符不是换行,但是恰恰字符是以\n开始的。
二选一,正则表达式中的或,“|“

b|c表示,匹配b或者c。

例如:

1
2
3
reg   =   /b|c/ ;
str = 'blueidea' ;
execReg (reg ,str ) ;

结果是b。

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

结果是c。

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

匹配掉整个cainiao。

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

结果只有一个b,而不是整个字符串。因为上面正则表达式的意思是,匹配开头的b或者是c.+。

括号

1
2
3
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中的任意一个字符。例如:

1
2
3
reg   =   /^[abc]/ ;
str = 'bbs.blueidea.com' ;
execReg (reg ,str ) ;

返回结果是b。

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

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

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

结果是整个test,正则的意思是开头必须是英文字母,后面可以是英文字母或者数字以及下划线。
反字符集合[^abc]

^在正则表达式开始部分的时候表示开头的意思,例如/^c/表示开头是c;但是在字符集和中,它表示的是类似“非“的意思,例如[^abc]就表示不能是a,b或者c中的任何一个。例如:

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

1
2
3
reg   =   /[^abc]/ ;
str = 'cainiao' ;
execReg (reg ,str ) ;

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

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

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

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

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

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

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

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

这次匹配失败,因为bcb字符串中的c被夹在中间,既不在左边界也不再右边界。
与\b对应\B表示非边界。例如:

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

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

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

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

\d表示数字的意思,相反,\D表示非数字。例如:

1
2
3
reg   =   /\d/ ;
str = 'cainiao8' ;
execReg (reg ,str ) ;

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

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

返回c,第一个非数字字符。
空白

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

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

1
2
3
reg   =   /\s.+/ ;
str = 'This is a test String.' ;
execReg (reg ,str ) ;

返回“is a test String.”,正则的意思是匹配第一个空格以及其后的所有非换行字符。
同样,\S表示非空格字符。

1
2
3
reg   =   /\S+/ ;
str = 'This is a test String.' ;
execReg (reg ,str ) ;

匹配结果为This,当遇到第一个空格之后,正则就停止匹配了。
单词字符


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值