前端正则最全知识汇总（学会正则收藏它就够啦）

本篇文章的脑图来袭喽

1. 正则的认识

1.1 什么是正则

regular expression:RegExp (处理字符串的一种规则)

• 用来处理字符串的一种规则（只能处理字符串，不是字符串不能处理，但是可以使用toString()方法变为字符串，哈哈哈哈，有没有被绕蒙，下面举个栗子理解一下吧）
• 他是一个规则：可以验证字符串是否符合某个规则（test），也可以把字符串中符合规则的内容捕获到（exec/match…）

1.2 初步查看正则

下面是使用正则去验证某个字符串的例子！先简单的看一下格式，如果正在看文章的你是第一次接触正则，看完下面的文章就可以轻松理解这个例子了（抛砖引玉一下，哈哈，带着你好奇的心情继续看下去吧!）

let str = 'good';
let reg = /\d+/;
reg.test(str);  //false

str = '2020-04-09';
reg.test(str); //true

2. 编写正则表达式

2.1 创建方式

2.1.1 字面量创建方式

两个斜杆之间包起来的，都是用来描述规则的元字符

let reg1 = /\d+/;

2.1.2 构造函数模式创建

使用正则对象 new的方式，写成字符串形式的

//说明，字符串中直接`\d`是输出的d,因此需要使用`\`转义一下，
let reg2 = new RegExp('\\d+');

不管使用以上哪种方式创建，得到的都是对象数据类型的。虽然 reg1 和 reg2 的规则一样，但是 reg1!==reg2，其实就是他们的堆内存地址不一样。（这个涉及到了 JS 中的数据类型的知识，不明白的小伙伴们可以去回顾一下哟！）

2.2 正则表达式的组成

很重要，背下来，背下来，背下来… 这是正则的基础，如果连每个字符代表的含义都不明白，正则基本就废了哟

2.2.1 元字符

• 量词元字符：设置出现的次数

元字符	含义
*	零到多次
+	一到多次
？	零到一次
{n}	n 次
{n,}	n 到多次
{n,m}	n 到 m 次

• 特殊元字符：单个或者组合在一起代表特殊的含义

元字符	含义
\	转义字符
.	除\n（换行符）之外的任意字符
^	以哪一个元字符开头
$	以哪一个元字符结尾
\n	换行符
\d	0-9 之间的一个数字（包含 0 和 9）
\D	除 0-9 之间的一个数字
\w	数字、字母、下划线中的任意一个字符
\s	一个空白字符（包含空格、制表符、换页符）
\t	一个制表符（一个 TAB 键，四个空格）
\b	匹配一个单词的边界
x|y	x 或 y 中的一个字符
[xyz]	x 或 y 或 z 中的一个字符
[^xy]	除了 x 和 y 以外的任意一个字符
[a-z]	指定 a-z 这个范围的任意字符
[^a-z]	上一个的取反“非”
()	正则中的分组符号
(?😃	只匹配不捕获
(?=)	正向预查
(?!)	反向预查

• 普通元字符：代表本身含义的

  • /name/此正则就是去匹配字符串中的'name'

2.2.2 修饰符：放在正则表达式的外面 /j/g

修饰符	含义
i(ignoreCase)	忽略大小写匹配
m(multiline)	可以进行多行匹配
g(global)	全局匹配
u(Unicode)	用来正确处理大于\uFFF 的 Unicode 字符
y(sticky)	粘连
s(dotAll)	让’.'能匹配任意字符，包含\n\r

背下来，背下来，背下来

2.3 常用元字符的详解

2.3.1 ^ $

在我们写正则表达式的时候，为了更加严谨，一般都要加上这两个元字符，然后把我们的规则写在他们之间（如果不写^$ 的话，我们写的规则有时会出现意想不到的事情，哈哈，别着急，一步步来。下面介绍到{n，m}的时候会结合它一起说明）

• ^ 以什么元字符开始
• $ 以什么元字符结尾
• ^/$ 两个都不加匹配的是：字符串中包含符合规则的内容即可
• ^/$ 两个都加匹配的是：字符串只能是和规则一致的内容

//匹配的是：以数字开头的字符串
let reg = /^\d/;
console.log(reg.test('name'));   //false
console.log(reg.test('2020name'));  //true
console.log(reg.test('name2020'));   //false

//匹配的是：以数字结尾的字符串
let reg = /\d$/;
console.log(reg.test('name')); //false
console.log(reg.test('2020name'));  //false
console.log(reg.test('name2020'));  //true

// ^/$ 两个都不加匹配的是：字符串中包含符合规则的内容即可
let reg1 = /\d/;
console.log(reg1.test('as2')); //true
//^/$ 两个都加匹配的是：字符串只能是和规则一致的内容
let reg2 = /^\d$/
console.log(reg2.test('as2')); //false
console.log(reg2.test('22')); //false
console.log(reg2.test('2')); //true

2.3.2 \

• 转义字符，他可以把没有意义的转为有意义的，也可以把有意义的变为没有意义的（好像又成功的把你们说迷糊了吧，哈哈，举个栗子什么都明白了）

//‘.’ 是代表除换行符之外的任意字符，而不是小数点
let reg = /^2.3$/;
console.log(reg.test('2.3')); //true
console.log(reg.test('2@3')); //true
console.log(reg.test('23')); //false

//现在我们把‘.’变为一个普通的小数点（使用到的就是\）
let reg = /^2\.3$/;
console.log(reg.test('2.3')); //true
console.log(reg.test('2@3')); //false

2.3.3 x|y

• x 或 y：直接 x|y 会存在优先级问题，一般配合小括号进行分组使用，因为小括号改变处理的优先级 => 小括号：分组

//匹配的是：以18开头或者以29结尾的都可以,以1开头以9结尾，8或2都可以，所以不加括号怎么理解都可以
//以下的匹配结果都为true
let reg = /^18|29$/;
console.log(reg.test('18'));
console.log(reg.test('29'));
console.log(reg.test('129'));
console.log(reg.test('189'));
console.log(reg.test('1829'));
console.log(reg.test('182'));
//以上不加括号我们可以有很多理解方式都是对的，但是我们加上括号，就不可能想上面那样理解了；
//匹配的是：18或者29中的一个，其余都是false
let reg = /^(18|29)$/;
console.log(reg.test('18'));
console.log(reg.test('29'));
console.log(reg.test('129'));
console.log(reg.test('189'));

2.3.4 []

• 中括号中出现的字符一般都代表它本身的含义（会消磁，把他本身的意义都消除掉了）
• \d 在中括号里面的含义仍然是 0-9，这个没有消磁
• [18]：代表的是 1 或者 8 中的任意一个
• [10-29]：代表的是 1 或者 9 或者 0-2

//下面的‘.’就是小数点的意思
let reg = /^[.]+$/;

//匹配的含义是：只能是@或者+的
let reg = /^[@+]$/;
console.log(reg.test('@')); //true
console.log(reg.test('+')); //true
console.log(reg.test('@@')); //false
console.log(reg.test('@+')); //false

//匹配的含义是：\d还是代表0-9
let reg = /^[\d]$/;
console.log(reg.test('9')); //true
console.log(reg.test('\\')); //false
console.log(reg.test('d')); //false

//匹配的含义是：1或者8
let reg = /^[18]$/;
console.log(reg.test('1')); //true
console.log(reg.test('8')); //true
console.log(reg.test('18')); //false

//匹配的含义是：1或者0-2或者9
let reg = /^[10-29]$/;
//匹配的含义是：1或者0-2或者9或'('或')'
let reg = /^[(10-29)]$/;

2.3.5 {n,m}

• 它是代表前面的元字符出现 n 到 m 次

  下面的例子中，不加^$ 的超出范围的虽然返回的是 true，但是在使用 exec 捕获的时候，最多捕获 4 个（这个问题是我在学习的时候最大的一个纠结点，如果不知道加上开头结尾符的话，一直认为这个{n,m}在超出范围是不管用的，哈哈）