十分钟入门正则表达式

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

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

开始学习

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

一、字符组

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

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

/[Hh]ello/

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

示例 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	0123456789

二、快捷方式

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

示例 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	parked

示例 8：可选字符

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

/favou?rite/

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

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

示例 1：重复次数

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

/\d{5}/

匹配文本	匹配输出
1234567890	1234567890

/\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	0123456

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

四：实战

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

规则：

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

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

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

/http.*/$/

---

快去做些小练习吧！

感谢阅读，下次见 :)