2024年前端最新《正则》入门与精通，Web前端开发面试上机题

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

因为我们需要有一些特定的规则，去代表某一类所有的值，比如，需要匹配一个数字，但是不确定数字到底是几，所以如果使用直接使用具体某一个指定的数字去匹配，显然局限性太大并且很不合理；

• [ … ]：代表去匹配在“[ ]”内的任意字符，比如匹配数字0-9，那么用[ ]表示，就是[0-9]，假如现在需要任意一个11位的电话号码，那么就可以写成：/[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]/；

• [ ^… ]：与上面的[ ]相反，代表不在[]内的任意字符，比如[^0-9]，那么代表去匹配任意不是0-9的字符；

• . ：代表除了换行符和其他Unicode终止符之外的任意字符；

• \w ：代表任意由[a-zA-Z0-9]内的字符，这个[a-zA-Z0-9]也代表了ASCII码，意思是匹配任意小写的a到小写的z，大写的A到大写Z，0-9；

• \W：代表任意不由ASCII码组成的单词，也就是不在[a-zA-Z0-9]内的字符，与\w相反；

• \s：代表匹配任何一个Unicode字符；

• \S：匹配非任何一个Unicode字符；

• \d：[0-9]，代表任意一个数字，到这里就可以对上面的电话号码进行一次优化，由/[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]/改成:/\d\d\d\d\d\d\d\d\d\d\d/；

• \D：[^0-9]，任意一个非数字；

重复规则

就像上面的 /\d\d\d\d\d\d\d\d\d\d\d/ ，明明都是同一个值，却要写11次，太浪费时间了，必须简化一下；

• {n,m}：代表匹配前一项，至少n次，至多m次，这个前一项代表这个规则必须得跟在其他规则后面，比如/abc{2,4}/，代表匹配c这个字符至少2次，至多4次，并不是代表匹配abc这个字符串至少2次，之多4次；

• {n,}：代表匹配前一项，至少n次，/abc{2,}/，代表匹配c这个字符至少2次；

• {n}：代表匹配前一项，n次，/abc{2}/，代表匹配c这个字符2次；

• ？：代表匹配前一项0次，或者1次，转成{}的写法就是：{0,1}，比如：/abc?/，或者/abc{0,1}/，代表匹配abc，或者ab；

• +：代表匹配前一项至少1次，转成{}写法就是{1,}，比如/abc+/，或者/abc{1,}/，代表匹配abc，其中c至少出现1次；

• ：代表匹配前一下0次或多次，转成{}写法就是{0,}，比如/abc/，或者/abc{0,}/，代表匹配abc，其中c可以不出现，也可以是出现任意次数；

如果使用重复规则改写上面那个电话号码的正则，就是：/\d\d\d\d\d\d\d\d\d\d\d/ 改成 /\d{11}/，或者 /[0-9]{11}/

选择规则

有时候需要对匹配的内容做一个判断，这个时候就需要用到选择规则了

• |：代表选择，比如匹配的某一位是一个a-z的字母，或者是一个0-9的数字，不能确定是哪一个，那么就可以写成/[a-z]|\d/;

锚点

对匹配的内容做一个边界处理，比如第一位必须是什么，最后一位必须是什么

• ^：代表字符串的开头

• $：代表字符串的结尾

• \b：匹配单词边界

• \B：匹配非单词边界

示例1：

**正则 /**1，第一位必须是数字1，\d等同与[0-9]，{10}重复匹配10次，&必须是前面的结尾，换句话说，匹配了一串数字，一共是11位，第一位必须是1，之后是10位可以是0-9的任意数字，但是最后一位必须是数字0-9，不能是其他的；

示例2：

正则 /\bscript\b/，匹配一个script，必须是一个单词script，前后不能有其他字符，如果是javasript，那就匹配失败，因为s不是边界，s前面还有其他字符,t符合要求，因为t后面没有其他字符了；

修饰符

---

代表了高级匹配规则，位置写在/pattern/后面，因为正则的匹配只会匹配一次，比如abcabc，正则是/abc/，那么正则只会去匹配第一个abc，匹配到之后就会停止匹配，第二个abc不会再去匹配，这个修饰符就可以去对正则进行一个修饰，比如设定成全局匹配，也就是将所有的都匹配出来

• i：不区分大小写，比如/(abc)+/i，匹配至少含有一个abc的字符，但是这个abc不区分大小写；

• g：全局匹配，比如/(abc)+/g，匹配至少含有一个abc的字符，但是匹配是去全局匹配，假如一段话中有多个(abc)+，如果不是有g，那么匹配到第一个符合规则的字符串后就会结束，因此假如需要匹配多个的话，就需要加上g；

• m：多行匹配模式，比如/(abc)+/m；

贪婪模式

---

在匹配的过程中，正则会去尽可能多的匹配字符，也就是所谓的贪婪模式；

比如：

有一个字符串:aaabc，/a+/去匹配的时候匹配到的是aaa，因为+代表了至少出现一次，因此当需要只匹配1次的时候，那么就要用到非贪婪模式(？)，使用?去限定/a+?/，匹配到单独的a；

那么，换一个正则，/a+bc/，是否可以使用/a+?bc/去限定匹配到abc呢，答案是否定的，因为正则去匹配字符串的时候是从第一个字符去匹配的，并不会从字符的当中去截取，因此还是会去匹配到aaabc；

转义

---

在正则中，有些符号是有特殊意义的，比如 . ，代表的是除了换行符和其他Unicode终止符之外的任意字符，那么如果实例中要匹配一个 .，怎么办？那么就需要用到转义了；

• \：在特殊符号之前加上\，代表匹配这个符号本身，比如/ \ . /，那么这个正则就会去匹配字符串中的.，而不是去匹配除了换行符和其他Unicode终止符之外的任意字符；

零宽断言

---

零宽断言与其说是正则里面的规则，不如说是对匹配规则附加了的一个限定条件，因为有时候正则捕获的内容前后必须是特定内容作为限定，但又不捕获这些特定的限定内容的时候；

?=exp 规则

---

• ?=exp：非获取匹配，规定了出现位置的右侧必须是指定的exp，指定的exp不会加入匹配结果；

var str=“abZW863ab88”;

//规定了出现位置后面必须跟随大写的A-Z，但是匹配到的A-Z不会加入匹配结果

var reg=/ab(?=[A-Z])/g;

//匹配到第位置0后面的ab

console.log(str.match(reg));

解释：

首先正则的意思是去字符串去匹配所有的字符“ab”，然后因为正则中有零宽断言限定，所以找到ab后，限定是：在ab右侧位置的的后面必须是一个A-Z的大写：

1. 第一个ab，满足条件，位置2的后面是大写字母Z，因此满足；

2. 第二个ab，不满足条件，因为位置9的后面是数字8，不是大写字母A-Z；

?<=exp 规则

---

• ?<=exp：非获取匹配，自身出现的位置的左侧必须是指定的exp，指定的exp不会加入匹配结果；

var str=“abZW863ab88”;

var reg=/(?<=[0-9]+)ab(?=[A-Z])/g;

console.log(str.match(reg)); //匹配到null

解释：

首先正则的意思是去字符串去匹配所有的字符“ab”，然后因为正则中有零宽断言限定，所以找到ab后，在ab的左侧位置的前面必须是至少一个0-9的数字，在ab的右侧位置的后面必须是一个A-Z的大写：

1. 第一个ab，位置0不满足位置0的前面必须至少有1位0-9的数字，位置2则满足位置2的后面一位必须是大写的A-Z；

2. 第二个ab，位置7满足限定条件位置7的前面至少有1位0-9的数字，但是位置9则不满足位置9的后面一位必须是大写的A-Z；

?!exp 规则

---

• ?!exp:非获取匹配，规定了出现位置的右侧不能是是指定的exp，指定的exp不会加入匹配结果；

var str=“abZW863ab88”;

var reg=/ab(?![A-Z])/g;

console.log(str.match(reg));//匹配到ab

解释：

首先正则的意思是去字符串去匹配所有的字符“ab”，然后因为正则中有零宽断言限定，限定自身位置所在的后面一位不能是A-Z，所以在字符串中匹配到的两个ab：

1. 第一个ab，在位置2的断言，限定了位置2的右侧不能是A-Z的大写字母，实际字符是Z，因此不满足条件；

2. 第二个ab，在位置9的断言，规定了位置9的右侧不能是A-Z的大写字母，实际字符中是8，因此满足条件，匹配成功；

?<!exp 规则

---

• ?<!exp:非获取匹配，规定了出现位置的左侧不能是是指定的exp，指定的exp不会加入匹配结果；

var str=“abZW863ab88”;

var reg=/(?<![0-9]+)ab(?![A-Z])/g;

console.log(str.match(reg)); //匹配到null

解释：

首先正则的意思是去字符串去匹配所有的字符“ab”，然后因为正则中有零宽断言限定，限定第一个断言自身位置的左侧不能是0-9的数字，第二个断言的右侧不能是A-Z的大写字母，所以在字符串中匹配到的两个ab：

1. 第一个ab，位置0的断言，限定位置0的前面不能是0-9的数字，位置2的断言限定位置2的后面不能是A-Z的大写字母，实际是位置0符合条件，因为前面没有字符了，没有字符也符合不是0-9的数字，位置2的断言不符合条件，因为位置2的后面是大写字母Z，匹配失败；

2. 第二个ab，位置7的断言，限定位置7的前面不能是0-9的数字，位置9的断言限定位置9的后面不能是A-z的大写字母，实际是位置7不满足条件，因为前面是数组3，而位置9的断言满足条件，因为位置9的断言后面是数字8，满足不是大写字母A-Z的条件；

方法

---

String.prototype.match(regexp)

检索字符串中能够匹配正则表达式的匹配项，然后以数组的形式返回；

参数

• regexp：正则表达式；

返回值

返回值是一个数组，数组中的每一项是返回的匹配到的内容；

例如：

var b=“1231231231234296640918”;

console.log(b.match(/123/g)) //返回[“123”,“123”,“123”,“123”]

String.prototype.seach(regexp)

执行正则表达式和string之间的搜索匹配，如果匹配成功了，则返回匹配成功的的字符的位置，如果匹配失败则返回-1；

参数

• regexp：正则表达式；

返回值

第一个匹配的子串的其实位置或-1，注意不支持g，也就是全局查找；

例如：

var b=“1231231231234296640918”;

console.log(b.search(/\d/)) //返回0，因为第一个位置就是0

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。