JS正则基本知识

第一章:基本概念

概念:

正则表达式(regular expression)是一个描述字符模式的对象,ECMAScript的RegExp 类表示正则表达式,

而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。

正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。

作用:

  1. 提高用户体验
  2. 减轻服务器的压力

第二章:创建正则表达式

1.使用new来创建

1
var exp = new RegExp('box' , 'gi' );

第一个参数是字符串;

第二个参数可选模式修饰符

参数 含义
g 全局匹配
i 忽略大小写
m 多行匹配

2.使用字面量

1
var exp = /box/gi;

直接用2个 / ;

在俩个斜杠后加上模式修饰符;

俩种创建方式比较:

1.使用字面量方式创建用的更加广泛;

2.当要匹配的内容是变量时,只能使用new来创建.

第三章:正则表达式的测试

1.test( )

正则表达式对象.test(字符串)

  • 参数:要匹配的字符串
  • 返回值:匹配成功返回true,失败返回false
1
2
3
4
5
1:
var exp = /Box/i;
var str = 'box' ;
alert(exp.test(str));
=> true 忽略大小写 ;
1
2
3
4
5
6
7
8
9
10
2:
var exp = /abc/g;
var str = 'abcab';
var res = exp.test(str);
console.log(res);
console.log(exp.test(str));
console.log(exp.test(str));
=> true //从第一个开始匹配,匹配到了abc 返回true;
=> false //由于开启了全局匹配,所以从上次匹配之后的位置开始匹配(也就是从第二个a开始); 若没有g 则每次都会从头开始匹配
=> true //由于上次匹配是false并且已经将字符串str查找完了,所以又从头开始匹配

注:

​ 开启了全局匹配g后,正则表达式内部有一个lastIndex的属性,用以记录下次开始查找的下标,保证其每次从lastIndex的位置开始查找

1
2
3
4
5
6
7
8
3:
var exp = /abc/g; //同一正则表达式匹配不同字符串
var str1 = 'abc';
var str2 = 'abcab';
console.log(exp.test(str1));
console.log(exp.test(str2));
=> true; //从str1的0位开始匹配,匹配到了abc,返回true, 此时lastIndex为3
=> false; //从str2中lastIndex的位置开始匹配,也就是从第二个a开始
1
2
3
4
5
6
7
8
4:
var exp1 = /abc/g; //不同正则表达式匹配同一字符串
var exp2 = /abc/g;
var str = 'abc';
console.log(exp1.test(str));
console.log(exp2.test(str));
=> true; //从str1的0位开始匹配,匹配到了abc,返回true
=> true; //从str1的0位开始匹配,返回true

2.exec( )

exec(字符串):该方法为专门为捕获组而设计的

  • 参数:要匹配的字符串
  • 返回值:返回的是一个数组。如果不匹配则返回null

关于返回值数组的说明:

  • 它确实是Array的实例。
  • 但是这个数组有两个额外的属性:index和 input
  • index:表示匹配的字符串在源字符串中的索引
  • input:表示匹配的源字符串。
  • 数组的第一项是与整个模式匹配的字符串,其他项是与模式中捕获组匹配的字符串
  • 如果没有捕获组,则数组中只有第一项。关于捕获组的概念以后再说
1
2
3
4
5
6
7
1:
var exp = /abc/gi;
var str = "aaabcccdabcAbcAdaBc";
var strNew = "";
while (strNew=exp.exec(str)){ //使用while循环,将所有匹配到字符串输出来
console.log(strNew[0]) //由于返回的是一个带有很多属性的数组,所以我们只要数组中的字符串,也就是索引为0.
}

第四章:正则表达式的规则

1
2
3
4
5
6
字符类:单个字母数字下划线
. //匹配除换行符外的任意字符(当点放在[]中是,没有特殊意义)
var exp = /\d/g; // [0-9]
var exp = /\D/g; //[^0-9]
var exp = /\w/g; //[a-zA-Z0-9_];
var exp = /\W/g; //[^a-zA-Z0-9_];
1
2
3
4
5
6
7
8
字符类:空白字符
\0 匹配null 字符
\b 匹配退格字符
\n 匹配换行符
\r 匹配回车字符
\t 匹配制表符
\s 匹配空白字符、空格、制表符和换行符
\S 匹配非空白字符
1
2
3
元字符/元符号                    匹配情况
^ 行首匹配
$ 行尾匹配
1
2
3
4
5
6
7
8
9
字符类:重复字符
元字符/元符号 匹配情况
? 例如(x?) 匹配0个或1 个x
* 例如(x*) 匹配0个或任意多个x
+ 例如(x+) 匹配至少一个x
(xyz)+ 匹配至少一个(xyz)
{m,n} 例如x{m,n} n>=次数>=m 匹配最少m个、最多n个x
{n} 匹配前一项n次
{n,} 匹配前一项n次,或者多次

1.[ ]

匹配[ ]内的任意一个字符

1
var exp = /[abc]/gi;				// []内代表匹配其中的一个字符: a 或 b 或 c
1
var exp = /[a-zA-Z0-9_$]/g;			//匹配26个大小写字母,0-9数字,下划线_  美元符$ 中的任意一个;
1
var exp = /[^a-zA-Z]/g				//匹配任意不在括号中的字符集中的字符;

[ ]也可以配合? * + {} 来使用; 如[a-z]+ 匹配至少一个[a-z]范围内的任意一个;

2. ^

俩种用法:

1.放在[ ] 内 表示非

1
var exp = /[^a-zA-Z]/g				//匹配任意不在括号中的字符集中的字符;

2.放在[ ] 外,表示行首匹配

1
2
3
4
5
var exp = /^\d/g;					//规定行首必须是数字		
var str = '123qq';
console.log(exp.test(str)); //行首为数字1,返回true;
console.log(exp.lastIndex); //此时lastIndex 为1
console.log(exp.test(str)); //从下标为1的位置开始匹配,虽然下标为1的位置是数字,但却不是行首,返回false;

3. $

表示行尾匹配,用法与^ 相近

^ 和 $ 合用

1
2
3
4
5
6
7
8
9
var exp = /^\d\d$/g;				//规定行首和行尾必须是数字
var str = '12';
var str2 = '123';
console.log(exp.test(str)); // true
console.log(exp.lastIndex); // 2
console.log(exp.test(str)); //false
console.log(exp.lastIndex); //0
console.log(exp.test(str)); //true
console.log(exp.test(str2)); //false //exp中规定了行首行尾为数字,中间无内容

4. .

匹配除换行符外的任意字符(当点放在[ ]中是,没有特殊意义)

1
2
3
4
var exp = /./g;
var str = 'a';
console.log(exp.test(str));
=> true

若想匹配它本身.

1
var exp = /\./g;

5. |

择一匹配(管道符号) 表示或

1
2
3
4
var exp = /a|b/g;
var str = 'a';
console.log(exp.test(str));
=> true

数量词的匹配:默认都是贪婪匹配

6. ?

匹配0个或者1个

7. *

匹配0个或者多个

1
2
3
4
var exp = /a*/g;
var str = 'aaaaa';
console.log(exp.test(str)); //true
console.log(exp.test(str)); //true

8. +

匹配1个或多个

1
2
3
4
var exp = /a+/g;
var str = 'aaaaa';
console.log(exp.test(str)); //true
console.log(exp.test(str)); //false

9. {n}

匹配n个,只能是n个

10. {n,}

匹配至少n个

11. {n,m}

匹配至少n个,最多m个

第五章:基本的正则表达式验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
写一个正在表达式,判断手机号是否合法
var exp = /1[34578]\d{9}$/g;
var str = '13979318939';
console.log(exp.test(str));
=> true
写一个正在表达式,判断邮箱是否合法
var exp = /^\w{3,15}@[\w-]+\.(com|cn|net|org|edu|com\.cn)$/gi;
var str = '133_d@cn.com.cn';
console.log(exp.exec(str)[0]);
=> 133_d@cn.com.cn
写一个正则表达式,判断图片的地址是否合法
var exp = /^(http|https):\/\/.+\.(jpg|jpeg|gif|png)$/gi;
var str = 'http://3323498dsfledf.png';
console.log(exp.exec(str)[0]);
=> http://3323498dsfledf.png
写一个正则表达式,爬取一堆字符串中的所有图片地址
var exp = /http:\/\/[^:]+\.(jpg|jpeg|gif|png)/gi;
写一个正则表达式,将字符串中的重复去掉
var exp = /(.)\1+/gi;
var str = "aabbccdd";
console.log(str.replace(exp,'$1'));
=> abc

第六章:方法

str.search(exp);

检索与正则表达式相匹配的第一个匹配项的索引。

返回值: 索引 ,没有返回-1;

注:search( )不支持全局,每次调用总是从0开始查找.加不加g都一样

2.match( )

str.match(exp);

把满足正则表达式的所有字符串一起返回

返回值: 数组 ,没有返回null;

1
2
3
var str = "abc134ABC244co9";
console.log(str.match(/\d+/gi)); //获取str中的所有数字的数组
=> ["134","244","9"]

注:如果想获取所有的满足的,应该使用全局g,使用全局的时候,分组的信息则拿不到

3.replace( )

str.replace(exp,newStr);

将正则表达式替换

返回值: 替换之后的字符串

1
2
3
var str = "123aaa244";
console.log(str.replace(/\d/gi,"")); //将str中的数字全部去掉
=> aaa
1
2
3
4
5
写一个正则表达式,将字符串中的重复去掉
var exp = /(.)\1+/gi;
var str = "aabbccdd";
console.log(str.replace(exp,'$1'));
=> abc
4.split( )

str.split(exp,length);

length:可选参,切出来的数组的最大长度

使用split 拆分成字符串数组

返回替换之后的字符串

1
2
3
4
var str = "102dsfe00dfefsf55";
var exp = /\D+/gi; //用所有非数字来切割
console.log(str.split(exp));
=> ["102","00","55"]

评论