前言

正则表达式一直是许多人的痛点。第一次看到这五个字的时候觉得充满逼格且神秘，学起来的时候也一头雾水，开发中需要正则验证时基本都是面向百度编程。

最近在掘金上发现一篇前端大佬老姚写的正则好文，浅显易懂，感觉打开了新世界的大门😆

附上链接：

JavaScript 正则表达式迷你书： https://juejin.im/post/59cc61176fb9a00a437b290b

开发中可以根据需求自己写正则，修改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: https://github.com/ordinaryA

个人博客：http://www.almx.top/blog/