JavaScript正则表达式的个人笔记

正则表达式

一、正则表达式创建
- 1.`var reg = /test/;`
- 2.`var reg = new RegExp('test');`
- 3.正则表达式的exec方法
二、正则表达式模式
- 1.一片两片三四片，落尽正则全不见{n},{n-1,n},{1,}。
- 2./^开头,结尾$/
- 3.点“.”
- 4.或“|“
- 5.括号
- 6.字符集合[abc]
- 7.反字符集合[^abc]
- 8.边界与非边界
- 9.数字与非数字
- 10.空白
- 11.单词字符
- 12.反向引用
- 13.不记录子正则表达式的匹配结果
- 14.正向预查
- 15.匹配元字符
三、正则表达式修饰符
四、正则表达式方法
- 1.exec方法
- 2.test方法
五、使用字符串的方法执行正则表达式
- 1.match方法
- 1.replace方法
- 2.search方法
- 3.split方法
六、习题练习

一、正则表达式创建

1.`var reg = /test/;`

2.`var reg = new RegExp('test');`

3.正则表达式的exec方法

var reg = /test/;
var str = 'testrjf';
var res = reg.exec(str);
//会匹配str里面test内容，有就返回匹配的该内容，没有返回null
console.log(res);//数组形式保存test

二、正则表达式模式

这里写一个方法方便后面演示

function execReg(reg,str){var result = reg.exec(str);console.log(result);
}

1.一片两片三四片，落尽正则全不见{n},{n-1,n},{1,}。

reg = /c{1}/;//匹配一个c
str='cainiao';
execReg(reg,str);//返回c

reg = /c{2}/;//匹配两个连续的c,{n}同理
str1='ccaniao';
str2='cacniao';
execReg(reg,str1);//返回cc
execReg(reg,str2);//返回null，没有两个连续cc

reg = /c{3,4}/;//匹配3个或4连续的c
str1='cccTest';
str2='ccccTest';
execReg(reg,str1);//返回ccc
execReg(reg,str2);//返回cccc。(正则会尽量多的匹配)

reg = /c{1,}/;//匹配1个以上的c。{2,}{3,}...同理
str1='cccTest';
str2='chjjk';
execReg(reg,str1);//返回ccc
execReg(reg,str2);//返回c

reg='/c*/和等同于reg='/c{0,}/
reg='/c+/和等同于reg='/c{1,}/
reg='/c?/和等同于reg='/c{0,1}/
这里在提示一下，正则表达式会尽可能匹配多的目标返回，有4个就不会返回3个

2./^开头,结尾$/

^开头

reg = /^c/;//^表示只匹配字符串的开头
str1='维生素c';
str2='cainiao';
execReg(reg,str1);//结果为null，因为字符串‘维生素c’的开头并不是c
execReg(reg,str2);//这次则返回c

结尾$

reg = /c$/;//$匹配字符串结尾的字符
str1='cainiao';
str2='维生素c';
execReg(reg,str1);//返回null
execReg(reg,str2);//返回c

3.点“.”

reg = /./;//'.'会匹配字符串中除了换行符\n之外的所有字符
str1='cainiao';
str2='bainiao';
execReg(reg,str1);//正则匹配到了字符c
execReg(reg,str2);//正则匹配到了字符b

reg = /.+/;
str1='blueidea—经典论坛  好_。';
str2='bbs.blueidea.com';
str3='\ncainiao';
execReg(reg,str1);
//返回'blueidea—经典论坛  好_。'所有的字符都被匹配到了
execReg(reg,str2);//返回'bbs.blueidea.com'
execReg(reg,str3);//返回null

4.或“|“

reg = /b|c/;
str1='blueidea';
str2='cainiao';
execReg(reg,str1);//返回b
execReg(reg,str2);//返回c

reg = /^b|c.+/;
str='cainiao';
execReg(reg,str);//返回cainiao，理解成开头b|c然后.+

reg = /^b|c.+/;
str='bbs.blueidea.com';
execReg(reg,str);//返回b，这里看成开头的b或者是c.+

5.括号

reg = /^(b|c).+/;
str='bbs.blueidea.com';
execReg(reg,str);//此时才是开头b|c，然后.+
//回的结果后面多出来一个“,b“，这是()内的b|c所匹配的内容。
//我们在正则表达式内括号里写的内容会被认为是子正则表达式，所匹配的结果也会被记录下来供后面使用。我们暂且不去理会这个特性。

6.字符集合[abc]

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

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

7.反字符集合[^abc]

reg = /[^abc]/;
str='blueidea';
execReg(reg,str);//返回l（即第一个b没有匹配）

即：[^0-9] 表示非数字，[^a-z] 表示非小写字母…

8.边界与非边界

\b表示的边界的意思

reg = /\bc/;//表示字符串开始的c或者是结尾的c
str1='cainiao';
str2='维生素c';
execReg(reg,str1);//返回c，左边界的c
execReg(reg,str2);//返回c，右边界的c

\B表示非边界

reg = /\Bc/;//表示字符串除了开始（结尾）的c
str='aicniao';
execReg(reg,str);//返回c，中间的c

9.数字与非数字

\d表示数字的意思

reg = /\d/;
str='cainiao8';
execReg(reg,str);//返回8

\D表示非数字的意思

reg = /\d/;
str='cainiao8';
execReg(reg,str);//返回c

10.空白

\f匹配换页符，\n匹配换行符，\r匹配回车，\t匹配制表符，\v匹配垂直制表符。
\s匹配单个空格，等同于[\f\n\r\t\v]。

reg = /\s.+/;
str='This is a test  String.';
execReg(reg,str);//返回'is a test String.',匹配第一个空格以及其后的所有非换行字符。

\S表示非空格字符。

reg = /\S+/;
str='This is a test  String.';
execReg(reg,str);//This，当遇到第一个空格之后，正则就停止匹配

11.单词字符

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

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

\W表示非单词字符，等效于[^a-zA-Z0-9_]。

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

12.反向引用

reg = /(\w)\1/;
str1='blueidea';
str2='bblueidea';
execReg(reg,str1);//返回null
execReg(reg,str2);//bb
//这里的“\1”就叫做反向引用，它表示的是第一个括号内的字正则表达式匹配的内容。
//在上面的例子中，第一个括号(\w)匹配了b，“\1”就同样表示b了，在余下的字符串里自然找不到b了。

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

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

reg = /^(?:b|c).+/;
str='bbs.blueidea.com';
execReg(reg,str);//返回bbs.blueidea.com
//前面提到的括号里子表达式不被保存

14.正向预查

形式：(?=pattern)，即要匹配的字符串，后面必须紧跟着pattern！

reg = /cainiao(?=8)/;//只是后面必须跟着8，但结果不匹配8
str1='cainiao9';
str2='cainiao8';
execReg(reg,str1);//返回null
execReg(reg,str2);//返回cainiao

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

reg = /cainiao(?!8)/;
str1='cainiao9';
str2='cainiao8';
execReg(reg,str1);//返回cainiao
execReg(reg,str2);//返回null

15.匹配元字符

*,+,?之类的符号，它们在正则表达式中都有一定的特殊含义，类似这些有特殊功能的字符都叫做元字符。那我们想匹配’c?'这种字符串呢？

reg = /c\?/;
str='c?';
execReg(reg,str);//返回'c?'

三、正则表达式修饰符

1.i: 执行对大小写不敏感的匹配。

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

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

2.g: 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

在后面进行讲解

3.m: 执行多行匹配。

reg = /^b/;
str = 'test\nbbs';//有换行
execReg(reg,str);//null

reg = /^b/m;
str = 'test\nbbs';
execReg(reg,str);//返回b,换行后第二行b开头

四、正则表达式方法

1.exec方法

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

function  execReg(reg,str){var result =  reg.exec(str);console.log(typeof result);
}

reg = /b/;
str='bbs.bblueidea.com';
execReg(reg,str);
//显示result的类型是object。而且是一个类似数组的对象。

其中属性：index input 0。其中index是表示匹配在原字符串中的索引；而input则是表示输入的字符串；至于0则是表示只有一个匹配结果，可以用下标0来引用这个匹配结果，这个数量可能改变。我们可以通过返回值的length属性来得知匹配结果的总数量。
然后修改execReg函数

function  execReg(reg,str){var result =  reg.exec(str);console.log('index:'+result.index+'\n'+'input:'+result.input+'\n');for(i=0;i<result.length;i++){console.log('result['+i+']:'+result[i]+'\n');}
}

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

输入字符串为bbs.bblueidea.com；
匹配的b在原字符串的索引是0;
正则的匹配结果为一个b；

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

由上面两个例子可见，返回对象[0]就是整个正则表达式所匹配的内容。后续的元素则是各个子正则表达式的匹配内容。
exec方法在返回结果对象的同时，还可能会更新原来的正则表达式，这就要看正则表达式是否设置了g修饰符。

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

两次匹配的结果完全一样，从索引可以看出来，匹配的都是字符串首的b字符。
设置了g的正则表达式

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

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

2.test方法

仅仅检查是否能够匹配str，并且返回布尔值以表示是否成功。

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

reg = /b/;
str = 'bbs.blueidea.com';
testReg(reg,str);//返回true

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

1.match方法

形式：str.match(reg)返回一个类似数组的对象，也有input和index属性

reg = /b/;
str =  'bbs.blueidea.com';
console.log(str.match(reg));

和exec的结果一样。

如果正则表达式设置了g修饰符

reg = /b/g;
str =  'bbs.blueidea.com';
console.log(str.match(reg));

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

1.replace方法

形式：str. replace (reg,’new str’)将str字符串中匹配reg的部分用’’new str”部分代码，值得注意的是原字符串并不会被修改，而是作为返回值被返回。

reg = /b/;
str =  'bbs.blueidea.com';
newStr =  str.replace(reg,'c');
console.log(newStr);//返回cbs.blueidea.com

reg = /b/g;
str =  'bbs.blueidea.com';
newStr =  str.replace(reg,'c');
console.log(newStr);//返回ccs.clueidea.com
//设置了g修饰符，所以会替换掉所有的b

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

reg = /(\w+).(\w+).(\w+)/;
str = 'bbs.blueidea.com';
newStr = str.replace(reg,'$1.$1.$1');
console.log(newStr);//返回bbs.bbs.bbs

第一个子正则表达式匹配到了bbs，那么$1也就代表bbs了。
其后我们把替换字符串设置为’$1.$1.$1’,其实也就是“bbs.bbs.bbs”。
同理，$2就是blueidea，$3就是com。
由于在替换文本里$有了特殊的含义，所以我们如果想要是用$这个字符的话，需要写成$$

reg = /(\w+).(\w+).(\w+)/;
str = 'bbs.blueidea.com';
newStr = str.replace(reg,'$$.$$.$$');
console.log(newStr);//返回$.$.$

2.search方法

返回正则表达式第一次匹配的位置,即前面的index。

3.split方法

返回分割后的数组

reg = /\W/;
str = 'bbs.blueidea.com';
arr = str.split(reg);
console.log(arr);//返回$.$.$

六、习题练习

1.30CAC0040取出40,3SFASDF92取出92
2.使字符串内空格统一，如:蓝色理想——蓝色理想
3.判断字符串是不是由数字组成
4.手机电话号码正则表达式
5.只能输入数字和.
6.只能输入英文字母和. / \ :
7.替换字符串.前为指定内容
8.只匹配中文
9.只取匹配IP地址前三段
10.匹配<ul></ul>之间的内容
11.正则表达式获得文件名
12.绝对路径变相对路径
13.用户名正则表达式，中文、英文、数字、下划线、4-16个字符
14.匹配英文地址,包含.,字母数字，但开头只能是字母
15.匹配价格，开头数字若干，可能小数点以及后两位
16.份证号匹配，最后一位可能为X
17.邮箱正则表达式khh_515gkg@qq.com
18.正则验证日期格式yyyy-mm-dd格式
答案下期揭晓

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！