在工作中，大部分前端使用正则，都是面向 Google/百度一把梭，但是有些时候搜不到你想要的正则，或者有些正则把你给坑了（比如 CSDN 上的某些帖子），这个时候，我命由我不由天

所以，对于前端工程师来说，正则表达式，还是很有必要学习的

开始学习

这边推荐两个正则学习网站：正则测试 | 正则练习

一、字符组

匹配中括号里出现的元素任意一次
如何使用？看示例就懂了

示例1：匹配单词可能出现的字符

/[Hh]ello/

匹配文本	匹配输出
hello	`hello`
Hello	`Hello`
0Hello1	0`Hello`1

示例2：匹配多个单词

/[Yy]e[sp]/

匹配文本	匹配输出
Yes, man	`Yes`, man
Yep, good!	`Yep`, good!
yes, ok	`yes`, ok

示例3：匹配所有数字

- 表示区间

/[0-9]/

匹配文本	匹配输出
这是我的手机号码：13700000000	这是我的手机号码：`13700000000`

同理，如果想匹配所有小写英文字母，那么请这样写 [a-z]
如果想匹配大写，那么请这样写 [A-Z]
如果你比较贪心，想大写也想小写还想要数字，那么请这么写 [0-9a-zA-Z]

示例4：匹配特殊字符

\ 表示转义

/[a-z\-]/

匹配文本	匹配输出
margin-top: 0;	`margin-top`: 0;

示例5：匹配不包含的字符

^ 表示取反

/[^5-9]/

匹配文本	匹配输出
0123456789	`01234`56789

二、快捷方式

更简洁的方式去匹配
可以理解为：从 全拼输入法 到 双拼输入法

示例1: 匹配所有数字

/\d/

匹配文本	匹配输出
这是数字0123456789	这是数字`0123456789`

示例2: 匹配所有字符

/\w/

匹配文本	匹配输出
内容是 number0123456789	内容是 `number0123456789`
内容是 NUMBER0123456789	内容是 `NUMBER0123456789`

示例3: 匹配空白

/abc\s/

匹配文本	匹配输出
abc 11	`abc` 11

示例4：单词边界

\b 包起来就是匹配到完整单词

/\bhi\b/

匹配文本	匹配输出
hello hi hey	hello `hi` hey

示例5：取反

小写改成大写

/\D/

匹配文本	匹配输出
123是数字number	123`是数字number`

示例6：开始到结束

^ 是开始 $ 是结尾，注意不是放在区间！

/^border/

匹配文本	匹配输出
border-top	`border`-top
border-left	`border`-left

示例7：任意字符

使用 . 就是匹配任意字符，但是不能匹配换行符：\n

/.ar/

匹配文本	匹配输出
ear	`ear`
car	`car`
parked	`par`ked

示例8：可选字符

使用 a? 表示 a 是可选的，可以出现也可以不出现
可以理解为 js 的 arr.?map(item=>console.log(item))

/favou?rite/

匹配文本	匹配输出
favorite	`favorite`
favourite	`favourite`

三、匹配多个(重复)数据

示例1：重复次数

{} 在想要重复的字符后面加上 {重复次数}
相当于 VIM 编辑模式下的 number + action 只是先后顺序相反

/\d{5}/

匹配文本	匹配输出
1234567890	`12345`67890

/\d{3}-\d{7}/

匹配文本	匹配输出
010-1112222	`010-1112222`
我的电话号码是：020-1231234	我的电话号码是：`020-1231234`

示例2：重复区间

如果我写 \d{5,6}，正则默认是贪婪模式，就是说会优先匹配6个，那么我们如果想优先匹配5个，可以这么写：\d{5,6}?

/\d{5,6}/

匹配文本	匹配输出
123456	`123456`

示例3：开闭区间

/\d{1,}/

匹配文本	匹配输出
0123456	0`123456`

+ 等价于 {1,}，* 等价于 {0,}

四：实战

实战1：匹配所有手机号码

规则：

必须是 11 位的数字；
第一位数字必须以 1 开头，第二位数字可以是 [3,4,5,7,8] 中的任意一个，后面 9 个数是 [0-9] 中的任意一个数字。

/^1[34578]\d{9}/

实战2：匹配所有以 `http` 开头，以 `/` 结尾的数据

/http.*/$/

快去做些小练习吧！

十分钟入门正则表达式