学之无味，不学可惜的正则表达式

前言

重要性

之前在b站上突然刷到一段话，只能说我‘不懂’，我很有感触，

 

大概意思是这样的，对于编程人员来说有有这样一类技术

1. 他不难，但是很繁琐，不好记忆，用的很6的人不是很多～
2. 他很重要！重要！重要！（连说三遍，懂得都懂）。
3. 他熟悉又陌生。

提示到现在，各位小伙伴，心里有没有一点感觉，是不是感到DNA懂了，请把现在内心深处涌现出的技术打在公屏上好吧！！！

此时我们的正则表达式，它就粉墨登场了。（此时，我git老弟正在骑马赶来的路上～）

用途

他为啥重要呢，因为他用处真的广泛。以实际开发为例子，

• 日常开发中用没有遇到过，从URL中截取特定的参数（query）,类似的这种情况呢，这时候是不是用正则表达式。

what? 你说没遇到过？（我知道你在狡辩，但我不拆穿）

• 那行为了防止sql注入，这种安全攻击，你是不需要，对存入数据库的数据进行筛选处理。这得看正则表达式（躲的过初一，你躲的过十五？？？）

• 什么？你说你是个前端，我就不处理数据库（我假装不知道有node这种东西🐶🐶🐶）那么表单校验你总得用正则表达式吧？一些UI框架封装的校验规则必然不能适用于所有场景的（拿捏🫴）

OK，OK铺垫了这么多，想必小伙伴们也等急了，下面进入干货部分👇,对正则表达式进行一个小总结，方便日常工作中使用。

内容

匹配模式

表达式	含义
/....../i	不分大小写匹配
/....../g	全局匹配
/....../m	多行匹配

🌰

const str = `HEI
hei
hei`
const reg_i = new RegExp('h','i')
const reg_g = new RegExp('h','g')
const reg_m1 = new RegExp('^hei$','m')  //后续说明^,与$作用
const reg_m2 = new RegExp('^hei$','m')
console.log(str.match(reg_g),str.match(reg_i),str.match(reg_m1),str.match(reg_m2));

⚠️需要注意的是

 

表达式	描述
^	匹配字符串或行开头。
$	匹配字符串或行结尾。
\b	单词边界
\B	非单词边界

承接上面的多行匹配，& 和 ^ 都是以行为单位的。

🌰

const reg1 = new RegExp(/\bcat\b/g)
const reg2 = new RegExp(/cat/g)
let str = 'The cat scattered  cat his food all over the room'
console.log(str.match(reg1),str.match(reg2));

下面会比上面多匹配到一个scattered中的cat,因为这里的cat不是一个边界单词

const str = `
456123
789 
`
const reg1 = new RegExp('^123','m')
const reg2 = new RegExp('123','m')
const reg3 = new RegExp('123$','m')
console.log(str.match(reg1),str.match(reg2),str.match(reg3));

运行结果 显然reg1是匹配不到的，2。3 都可以正常匹配。

值得注意的是，如^ 和 $同时存在，就是严格匹配的字符串某行的内容。

字符匹配

元字符	功能说明
[xyz]	字符集，匹配位于[]中的任意一个字符
[^xyz]	反向字符集，匹配除[]之外的任何字符
[a-z]	字符范围。匹配指定范围内的任意字符
[^a-z]	反向字符范围。匹配指定范围之外的任意字符

特殊字符

表达式	描述
.	匹配除换行符以外的任何单个字符。
\w	匹配任何字母数字，包括下划线（等价于[A-Za-z0-9_]）。
\W	匹配任何非字母数字（等价于[^A-Za-z0-9_]）。
\d	数字。匹配任何数字。
\D	非数字。匹配任何非数字字符。
\s	空白。匹配任何空白字符，包括空格、制表符等。
\S	非空白。匹配任何非空白字符。
不常用的表达式	描述
\r	匹配一个回车符
\b	匹配单词头或单词尾
\B	与\b含义相反

出现频次表达式

表达式	描述
?	匹配前面的表达式0个或1个。即表示可选项。
+	匹配前面的表达式至少1个。
*	匹配前面的表达式0个或多个。
|	或运算符。并集，可以匹配符号前后的表达式。
{m}	匹配前面的表达式m个。
{m,}	匹配前面的表达式最少m个。
{m,n}	匹配前面的表达式最少m个，最多n个。

回溯查找

表达式	描述
引用	\0,\1,\2 和 0,1, $2
非捕获组	(?:)
前向查找	(?=)
前向负查找	(?!)
后向查找	(?<=)
后向负查找	(?<!)

🌰

const reg1 = new RegExp(/happ(?=ily)/)
//改表达式匹配不到happy中的happ.(?=ily)这个东西只是表示判断
const reg2 = new RegExp(/happ(?!ily)/)
let str = 'happy'
console.log(str.match(reg1),str.match(reg2));

练手小🌰

•  '(a|b)*c'

•  'ab{1,}'。

• '^[a-zA-Z]{1}([a-zA-Z0-9._]){4,19}$'

•  '^(\w){6,20}$'

•  '^[a-zA-Z]+$'

•  '^\w+@(\w+.)+\w+$'

•  '(\w)(?!.*\1)'

•  '(\w)(?=.*\1)'

结果：

• 匹配a或者b(0个或者多个)且后面紧挨着一个c
• 匹配ab,abb，abbb,...
• 匹配长度为5-20的字符串，必须以字 母开头并且可带字母、数字、“_”、“.”的字符串
• 匹配长度在6到20的任意字符（非空字符）
• 匹配一个或者多个字母

常用实例

• ^[\u4E00-\u9FA5]+$ 中文
• /^\d{4}-1[0-2]|0[1-9]-[1-3][0-9]|[4-9]$/ 时间日期 xxxx-xx-xx
• ^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$ 24小时制时间 xx:xx:xx
• ^(?:0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$
• ^[0-9][1-9]{4,}$ qq号
• ^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[0-9Xx]$ 二代身份证
• ^(?:(?:\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(?:\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$ ipv4地址
• ^(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$ 端口号
• ^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$ 16进制颜色

补充

给出几个常用的api。

笔试时候被一道题秀了，归根结底还是api记得不够熟练。 问题：以下什么是regExp类型的方法。

• compile
• exec
• match
• test

我想都没想就选compile（因为我没用过，没见过。这个方法现在已经废除了）(RegExp.prototype.compile）。

结果GG， 大家注意审题，是regExp的方法，match是string原型上面的方法。so? 害。 注意下面四个常用api,两两一组。

1. exec
2. match
3. test
4. search

其中

• 1，2返回匹配到的字符数组（等效），
• 3，4返回true,false（等效）。
• 1，3是regExp的方法，
• 2，4是string的方法。一定注意避坑

纸上得来终觉浅，绝知此事要躬行。对于常态化，琐碎的知识点来说，一点要多加实践才能熟能生巧。

（求赞，求赞！）