1、正则表达式的语法

语法

定义一个正则表达式

const 变量名 = /表达式/

比如:

const 变量名 = /前端/

2、正则表达式的方法

2.1、test()用来查看正则表达式与指定的字符串是否匹配

const reg = /前端/;
reg.test("学前端"); // true

2.2、exec()查找符合规则的字符串

如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。

const reg = /前端/;
const str = "学前端，前端工资高，就业前景好";
console.log(reg.exec(str)); 
//[ '前端', index: 1, input: '学前端，前端工资高，就业前景好', groups: undefined ]·

2.3、replace()用来替换字符串中符合规则的字符

// 替换首个
const reg = /Java/;
const str = "学Java";
str.replace(reg, "前端");
console.log(str.replace(reg, "前端")); //学前端
// 全局替换
const regAll = /Java/g;
const strAll = "学Java，Java好";
strAll.replace(regAll, "前端");
console.log(strAll.replace(regAll, "前端")); //学前端，前端好

2.4、match()可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

const reg = /前端/g;
const str = "学前端，前端工资高，就业前景好";

str.match(reg);
console.log(str.match(reg)); //[ '前端', '前端' ]

3、修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否全局匹配

image.png

// i
console.log(/a/.test("A")); //false
console.log(/a/i.test("A")); //true

// g
const str = "hello word";
str.replace(/o/, "_"); // hell_ word
str.replace(/o/g, "_"); // hell_ w_rd

4、元字符

普通字符

大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字

元字符

元字符是一些具有特殊含义的字符
可以极大提高了灵活性和强大的匹配功能
比如:匹配26个英文字母，用普通字符表示 abcde...xyz，但是用元字符表示示的话，只需[a-z]

4.1、边界符

4.1.1、单词边界

找出某句话中的某个单词，例如: The cat scattered his food all over the room.
想找到cat这个单词，但是如果只是使用/cat/这个正则，就会同时匹配到cat和scattered这两处文本，这时候就可以用到单词边界\b，它其实匹配的是能构成单词的字符(\w)和不能构成单词的字符(\W)中间的那个位置。

const str = "The cat scattered his food all over the room.";

// 这个正则就只会匹配到单词cat而不会匹配到scattered了
const reg = /\bcat\b/g;

console.log(str.match(reg)); //[ 'cat' ]

4.1.2、字符串边界

image.png

注意:如果^和$在一起，表示必须是精确匹配
匹配行首文本

const reg = /^a/;
console.log(reg.test("a")); //true
console.log(reg.test("abc")); //true

匹配行尾文本

const reg = /c$/;
console.log(reg.test("a")); //false
console.log(reg.test("abc")); //true

精准匹配
注意:如果^和$在一起，表示必须是精确匹配

const reg = /^abc$/;
console.log(reg.test("a")); //false
console.log(reg.test("abc")); //true
console.log(reg.test("adc")); //false

4.1、量词

表示某个模式出现的次数

image.png

4.1.1、*表示0次或者多次

// *表示0次或者多次
const reg = /^a*$/;

console.log(reg.test("a")); //true
console.log(reg.test("")); //true
console.log(reg.test("aaa")); //true
console.log(reg.test("b")); //false

4.1.2、 +表示1次或者多次

// +表示0次或者多次
const reg = /^a+$/;

console.log(reg.test("a")); //true
console.log(reg.test("")); //false
console.log(reg.test("aaa")); //true
console.log(reg.test("b")); //false

4.1.3、 ?表示0次或者1次

// ?表示0次或者1次
const reg = /^a?$/;

console.log(reg.test("a")); //true
console.log(reg.test("")); //true
console.log(reg.test("aaa")); //false
console.log(reg.test("b")); //false

4.1.4、 {n}只能有n次

// {n}表示只能有n次
const reg = /^a{3}$/;

console.log(reg.test("a")); //false
console.log(reg.test("")); //false
console.log(reg.test("aaa")); //true
console.log(reg.test("b")); //false

4.1.4、 {n,}大于等于n次

// {n,}表示大于等于n次
const reg = /^a{2,}$/;

console.log(reg.test("a")); //false
console.log(reg.test("")); //false
console.log(reg.test("aaa")); //true
console.log(reg.test("aa")); //true

4.1.5、 {n,m}n-m次

//  {n,m}n-m次
const reg = /^a{2,3}$/;

console.log(reg.test("a")); //false
console.log(reg.test("")); //false
console.log(reg.test("aaa")); //true
console.log(reg.test("aa")); //true

5、字符类

5.1、[] 匹配字符集合

// 后面的字符串只要包含 abc 中任意一个字符
const regl = /[abc]/;
console.log(regl.test("andy")); // true
console.log(regl.test("baby")); // true
console.log(regl.test("cry")); // true
console.log(regl.test("dad")); // true

// 使用连字符 - 表示一个范围
const reg2 = /[a-z]/; // 匹配26个英文小写字母中的任意一个
const reg3 = /[a-zA-Z]/; // 匹配26个英文字母中的任意一个，大小写都可以
const reg4 = /[0-9]/; // 匹配0-9中的数字

// []里面加上^表示取反，注意要写到中括号里
const reg5 = /[^a-z]/; // 表示匹配除了26个小写字母以外的字符

5.2、匹配除换行符之外的任意单个字符

const reg = /./; // 匹配除换行符之外的任何单个字符
reg.test("aaa"); // true
reg.test("123"); // true
reg.test(" n"); // false

5.3、预定义:指的是某些常见模式的简写方式

image.png

6.分组和分支结构

6.1、分组

我们知道/a+/匹配连续出现的“a”，而要匹配连续出现的“ab”时，需要使用/(ab)+，其中括号是提供分组功能，使量词+作用于“ab”这个整体

const reg = /(ab)+/g;
const str = "abba abbb babbba";
str.replace(reg, "cd"); //'cdba cdbb bcdbba

分组捕获:例如将YYYY-MM-DD格式的日期替换成MM/DD/YYYY
YYYY-MM-DD的匹配模式为/^\d{4}-\d{2}-\d{2}$/，是将整个日期作为一个组(group)匹配起来。我们把这样的叫Group0。

这个时候，如果我们上括号/^(\d{4})-(\d{2})-(\d{2})$/，那么分组就是下面的情况

YYYY-MM-DD Group0
YYYY Group1
MM Group2
DD Group3

想要获取每个分组匹配的内容该怎么获取呢?
可以通过 $符号获取，比如$1代表YYYY，$2代表MM，所以完整的代码应该如下:

// 分组捕获: 例如将YYYY-MM-DD格式的日期替换成MM/DD/YYYY
const reg = /^(\d{4})-(\d{2})-(\d{2})$/;
const date = "2023-09-15";
console.log(date.replace(reg, "$2/$3/$1")); //09/15/2023

6.2、分支结构(或)

分支结构类似逻辑操作中的或操作，表示匹配规则1或者规则2

const reg = /(java)|(前端)/;
const str1 = "学前端";
const str2 = "学java";
reg.test(str1); // true
reg.test(str2); // true

7、常用正则案例

7.1、密码匹配 (6-16位字母、数字或者下划线)

const reg = /^[a-zA-Z0-9_]{6,16}$/;

7.2、匹配16进制颜色值 (比如: #f0f0f0,#fff)

const reg = /^#([0-9a-fA-F]{6} | [0-9a-fA-F]{3})$/;

7.3、匹配24小时制的时间 (比如: 23:59，08:29)

const reg = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;

7.4、手机号码脱敏

// 15812345678 => 158****5678
const reg = /(^1[3-9]\d)\d{4}(\d{4})/;
const mobile = "15812345678";
console.log(reg.test(mobile)); // true
console.log(mobile.replace(reg, "$1****$2")); // 158****5678

7.5、密码包含大小写字母，数字，特殊字符,6到20位之间

const reg =/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[`~!@#$%^&*()_\-+=<>.?:"{}].*).{6,20}$/

8、常用的正则的工具

8.1、vscode插件:any-rule

功能:支持一键生成常见的正则表达式

8.1.1、安装any-rule

image.png

8.1.3、按下F1或者鼠标右键-->选择正则大全

image.png

8.1.3、可以输入关键词过滤

image.png

8.2、https://regexper.com/

功能:可视化自己写的正则表达式