JS正则相关

JS正则表达式相关

概念

正则表达式通常用于匹配字符串各种组合的模式。在JS中，正则表达式对象由RegExp构造函数创建。
对象常使用exec、test方法。通常也可以于String的match、replace、search、split方法中使用。

创建正则表达式

// 1. 使用RegExp构造函数
let re = new RegExp("ab+c");
//2. 使用字面量创建
let re = /ab+c/;

正则表达式常用方法

1.校验数据test(字符串) 【正则对象提供的方法】

测试数据是否匹配，匹配规则返回true/false

// let reg = new RegExp("[1,3,4]") 对象方法创建
let reg = /[1,3,4]/ // 字面量创建
console.log(reg.test("1"))//true

2.匹配数据exec(字符串) 【正则对象提供的方法】

exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。

let reg = /\d/ // 匹配数字
let tetStr = "woshi1232zifuchuan"
let res = reg.exec(tetStr)
console.log(res);//[ '1', index: 5, input: 'woshi1232zifuchuan', groups: undefined ]
//如果没有匹配到，返回null

以下是String的方法可配合正则使用

3.搜索数据search(正则表达式)

search() 方法检索字符串中的指定值，或指定值的位置。

let reg = /\d/ // 匹配数字
let tetStr = "woshi1232zifuchuan"
let res = tetStr.search(reg)
console.log(res);//5
//若search不到就返回-1

4.替换数据replace(正则表达式,替换内容)
replace 方法用于在字符串中替换与正则表达式匹配的指定值（默认只替换第一个匹配项）。若使用正则表达式的全局标志（g），则替换所有匹配项。

let reg = /\d/ // 匹配数字
let tetStr = "woshi1232zifuchuan"
let res = tetStr.replace(reg,"a")//把满足条件的字符串中的字串或者字符替换成a，只替换一次
console.log(res);//woshia232zifuchuan

注意：replaceAll 方法可以配合正则使用，但需要全局标志。

let reg = /\d/g; // 全局匹配数字
let testStr = "woshi1232zifuchuan";
let res = testStr.replaceAll(reg, "a"); // 替换所有匹配项
console.log(res); // woshiaaaaazifuchuan

5.字符串.match(正则表达式)
match() 方法如果正则表达式没有全局标志（g），检索返回字符串满足正则表达式的第一个结果只返回一个后结束。返回的结果是匹配正则表达式的第一个元素的相关信息的数组。

let reg=/\d/
let str="abcd456efg"
let res=str.match(reg) //字符串中满足表达式的部分提取出来
console.log(res) //[ '4', index: 4, input: 'abcd456efg', groups: undefined ]

正则表达式相关语法规则

符号	含义
[ ]	字符集合
[^ ]	非字符集合
{n}	重复n次
{n,m}	重复n到m次
{n,}	重复n次以上
{,m}	重复0到m次
?	0或1次
*	0到多次
+	1到多次
.	任意字符
^	字符串开始
$	字符串结束
\d	数字
\D	非数字
\w	单词字符
\W	非单词字符
\s	空白字符
\S	非空白字符
\b	单词边界
\B	非单词边界

正则表达式的修饰符

修饰符	含义
g	全局匹配
i	不区分大小写
m	多行匹配

正则表达式的分组

1.分组

let reg = /(\d+)-(\d+)/
let str = "123-456"
let res = reg.exec(str)
console.log(res);//[ '123-456', '123', '456', index: 0, input: '123-456', groups: undefined ]
console.log(res[0]);//123-456
console.log(res[1]);//123

2.命名分组

let reg = /(?<year>\d+)-(?<month>\d+)-(?<day>\d+)/
let str = "2022-02-02"
let res = reg.exec(str)
console.log(res);//[ '2022-02-02', '2022', '02', '02', index: 0, input: '2022-02-02', groups: { year: '2022', month: '02', day: '02' } ]
console.log(res.groups.year);//2022
console.log(res.groups.month);//02
console.log(res.groups.day);//02

3.捕获组

let reg = /(?<year>\d+)-(?<month>\d+)-(?<day>\d+)/
let str = "2022-02-02"
let res = reg.exec(str)
console.log(res);//[ '2022-02-02', '2022', '02', '02', index: 0, input: '2022-02-02', groups: { year: '2022', month: '02', day: '02' } ]
console.log(res[1]);//2022

正则实战

1.日期处理

// 捕获组的实际应用
let str = "2022-04-30";
// 注意和 /(\d{4})-(\d{2})-(\d{2})/的区别，这表示是全局模式
//^表示开头$表示结尾也就是匹配整个字符串如果str = "xxx 2022-04-30"这就不匹配了
let reg = /^(\d{4})-(\d{2})-(\d{2})$/; 
let result = reg.exec(str);
console.log(result[1]); // "2022"
console.log(result[2]); // "04"
console.log(result[3]); // "30"

//反向引用
let str = "2022-04-30";
// 注意和 /(\d{4})-(\d{2})-(\d{2})/的区别，这表示是全局模式
//^表示开头$表示结尾也就是匹配整个字符串如果str = "xxx 2022-04-30"这就不匹配了
let reg = /^(\d{4})-(\d{2})-(\d{2})$/; 
let result = str.replace(reg, "$3/$2/$1");
console.log(result);//30/04/2022

2.重复字符串处理

let str = "hello hello world world";

let reg = /(\b\w+\b) \1/g;//这里表示空格后再出现一次捕获到的单词，也就是说hello hello满足

let result = str.replace(reg, "$1");//将满足要求的字符串替换为捕获到的第一个单词

console.log(result); // "hello world"

3.邮箱地址处理

// ^ 开始匹配字符串的开始。
// [a-zA-Z0-9._%+-]+ 匹配一个或多个字母、数字、下划线、百分号、加号或减号。
// @ 匹配 @ 符号。
// [a-zA-Z0-9.-]+ 匹配一个或多个字母、数字、点或减号。
// \. 匹配点符号。
// [a-zA-Z]{2,} 匹配两个或更多的字母。
// $ 结束匹配字符串的结束。
let str = "hello@qq.com";
let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let res = reg.test(str)
console.log(res);//true

总结

正则表达式相当灵活，但是需要掌握一些语法规则和修饰符，以及一些应用场景。灵活运用可以极大的提高代码的效率和可读性。