前言
正则表达式一直是许多人的痛点。第一次看到这五个字的时候觉得充满逼格且神秘，学起来的时候也一头雾水，开发中需要正则验证时基本都是面向百度编程。
最近在掘金上发现一篇前端大佬老姚写的正则好文，浅显易懂，感觉打开了新世界的大门😆
附上链接：
JavaScript 正则表达式迷你书： juejin.cn/post/684490…
开发中可以根据需求自己写正则，修改code的时候可以在编辑器内通过正则来搜索，替换。
于是打算写一篇博客记录一下初学正则表达式的心得。
模糊匹配
正则最强大的地方在于模糊匹配，比如像/hello/这种精确匹配的正则表达式是没有什么实际意义的，只能匹配到字符串中的hello字段。
而正则表达式的模糊匹配分为两种：横向匹配与纵向匹配
横向匹配
当我们需要查询一个字段重复出现多次的时候，就会用到横向匹配。正则中表达横向匹配会用量词加上花括号来表示，{m,n}，m表示最少出现m次，n表示最多出现n次。
举个栗子：
const str = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
如上字符串，可以用正则/ab{2,4}c/g来匹配由a开头c结尾，中间有2到4个b组成的字符串。
const str = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
const reg = /ab{2,4}c/g;
const result = str.match(reg);
console.log(result);
// => ["abbc", "abbbc", "abbbbc"]
最终匹配到的为abbc，abbbc，abbbbc，其中b的个数分别为2,3,4个。
可能你会疑惑为什么需要在正则后加上修饰符g，我们去掉g后测试一下。
const str = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
const reg = /ab{2,4}c/;
const result = str.match(reg);
console.log(result);
// => ["abbc"]
最终匹配结果为abbc，由此可见在正则后加上修饰符g会匹配满足所有的可能，而不加则匹配到第一个后则停止匹配。
纵向匹配
当我们需要查询首字母为a，尾字母为c的字符串，可以用[]来筛选你需要的符合的字符。
举个栗子：
const str = "aac abc acc adc afc";
如果需要从上述字符串中匹配出字符aac与adc，可以用正则/a[ad]c/g来匹配，方括号内填入需要匹配的字符。
const str = "aac abc acc adc afc";
const reg = /a[ad]c/g;
const result = str.match(reg);
console.log(result);
// => ["aac","adc"]
如果我们需要匹配aac,abc,acc,adc，可以用正则/a[abcd]c/g或者/a[a-d]c/g来匹配（其中-表示从a到d）。
const str = "aac abc acc adc afc";
const reg = /a[a-d]c/g;
const result = str.match(reg);
console.log(result);
// => ["aac","abc","acc","adc"]
字符范围简写
当正则匹配的需求变多时可能会出现[0-9a-zA-Z]甚至更多，我们可以用简写的字符来代替这些范围。
| 简写字符 | 代表含义 |
|---|---|
\d |
表示范围[0-9]，表示为0到9中其中一位数字 |
\D |
表示范围[^0-9]（其中^表示取非），表示除数字外任意字符 |
\w |
表示范围[0-9a-zA-Z_]，表示数字、大小写字母和下划线。 |
\W |
表示范围[^0-9a-zA-Z_]，表示。非单词字符。 |
. |
表示[^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外 |
如果要匹配任意字符怎么办？可以使用 [\d\D]、[\w\W]、[\s\S] 和 [^] 中任何的一个。
量词简写
有了上述量词{m,n}的概念后，可以使用如下简写：
| 量词简写 | 代表含义 |
|---|---|
{m,} |
表示至少出现 m 次。 |
{m} |
等价于 {m,m}，表示出现 m 次。 |
? |
等价于 {0,1}，表示出现或者不出现。 |
+ |
等价于 {1,}，表示出现至少一次。 |
* |
等价于 {0,}，表示出现任意次，有可能不出现 |
多选分支
如果遇到需求为满足多个条件的其中一个就能匹配成功，我们就需要一个新的修饰符|（管道符，可以记忆为或）。
举个栗子：
const str = "aac abc acc adc afc";
如果需要从上述字符串中匹配出字符aac，abc与acc，可以用正则/a(a|b|c)c/g来匹配，()内填入满足匹配成功的条件，并用管道符|分隔开。
const str = "aac abc acc adc afc";
const reg = /a(a|b|c)c/g;
const result = str.match(reg);
console.log(result);
// => ["aac","abc","acc"]
总结
横向匹配，纵向匹配，多选分支理解后，基本的正则都能看懂了，大部分常用的正则弄清楚规则后，自己也能写一点了。
分享几个常用案例，会的大佬们可以把答案留在评论，继续深入学习可以点击此处，传送门
1. 匹配 16 进制颜色值
传入正则匹配如下结果：
const str = "#ffbbad #Fc01DF #FFF #ffE";
const arr = str.match(?);
console.log(arr);
// => ["#ffbbad","#Fc01DF","#FFF","#ffE"]
2. 匹配时间
以 24 小时制为例。
要求匹配：
传入正则匹配如下结果：
const str = "00:00 18:61 1:2 025:23 06:10 01:25";
const arr = str.match(?);
console.log(arr);
// => ["00:00", "06:10", "01:25"]
3. 匹配日期
以 yyyy-mm-dd 格式为例。
传入正则匹配如下结果：
const str = "2000-01-01 300-02-01 2019-2-2 2020-13-01 2000-04-32 2018-06-02";
const arr = str.match(?);
console.log(arr);
// => ["2000-01-01", "2018-06-02"]
特别鸣谢
本文部分描述以及举例摘自前端老姚的正则表达式迷你书，本文仅笔者个人学习记录，如需具体学习正则表达式可以见大佬的原文，再次附上传送门：点击此处
最后
GitHub: github.com/ordinaryA
个人博客：www.almx.top/blog/
