往期文章：# 受够了useState的逻辑分散？来，试试用reducer聚合逻辑
简介
正则表达式在前端开发中扮演着至关重要的角色，它是一种强大的文本处理工具，在字符串的匹配、验证、查找和替换等操作上拥有非常强大的功能！
不过，要想熟练的使用正则是很困难的，但是，前端中有几个和正则相关的方法，同样可以帮助我们很高效的完成正则处理~这篇文章，和我一起学习一下前端中常用的正则方法吧！
在介绍这些方法前，我们需要浅浅的了解一下正则表达式的写法！
前端中的正则表达式
语法
/正则表达式主体/修饰符
其中修饰符是可选的。
实例：
var patt = /test/i
- /test/i 是一个正则表达式。
- test 是一个正则表达式主体 (用于检索)。
- i 是一个修饰符 (含义是搜索不区分大小写)。
正则表达式修饰符
修饰符
修饰符用于执行区分大小写和全局匹配:
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
示例g：
const str = 'abc123def456ghi789';
const regex = /def456/g; // 使用g修饰符进行全局搜索
方括号
方括号用于查找某个范围内的字符：
| 表达式 | 描述 | ||
|---|---|---|---|
| [abc] | 查找方括号之间的任何字符。 | ||
| [[^abc]](www.runoob.com/jsref/jsref…) | 查找任何不在方括号之间的字符。 | ||
| [0-9] | 查找任何从 0 至 9 的数字。 | ||
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 | ||
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 | ||
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 | ||
| [adgk] | 查找给定集合内的任何字符。 | ||
| [^adgk] | 查找给定集合外的任何字符。 | ||
| (red | blue | green) | 查找任何指定的选项。 |
示例 [0-9] ：
在正则表达式中，[0-9] 是一个字符集合，用于匹配任何一个在 0 到 9 之间的数字字符。
const str = 'abc123def456ghi789';
const regex = /[0-9]/g; // 使用 [0-9] 匹配任何一个数字字符，并加上 g 修饰符进行全局搜索
const matches = str.match(regex); // 使用 match 方法获取所有匹配的结果
console.log(matches); // 输出: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
在这个例子中，正则表达式 /[0-9]/g 会匹配字符串 str 中的所有单个数字字符，并返回一个包含所有匹配结果的数组。每个数组元素都是一个匹配到的数字字符。
match下文有介绍
元字符
元字符（Metacharacter）是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找数字、字母及下划线。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NULL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八进制数 xxx 规定的字符。 |
| \xdd | 查找以十六进制数 dd 规定的字符。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
示例\d 元字符
\d 是一个元字符，用于匹配任何一个十进制数字，等价于 [0-9]。这意味着它会匹配字符串中的 '0'、'1'、'2'、'3'、'4'、'5'、'6'、'7'、'8' 或 '9'。
onst str = "我的电话号码是123-456-7890";
const regex = /\d/g; // 使用 \d 匹配任何一个数字，并加上 g 修饰符进行全局搜索
const matches = str.match(regex);
console.log(matches); // 输出: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
在这个例子中，正则表达式 /\d/g 会匹配字符串 str 中的所有单个数字字符，并返回一个包含所有匹配结果的数组。
量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。 |
| n* | 匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。 |
| n? | 匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。 |
| n{X,} | X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。 |
| n{X,Y} | X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| [^n](www.runoob.com/jsref/jsref…) | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
示例 量词（ + ）：
假设我们有一个字符串，包含了一些单词、数字以及特殊字符，我们想要找出所有由一个或多个连续字母数字字符（字母或数字）组成的序列。
const str = "kljshhh!@#test456";
const regex = /\w+/g; // 使用 \w+ 匹配一个或多个字母数字字符（包括下划线），并加上 g 修饰符进行全局搜索
const matches = str.match(regex);
console.log(matches); // 输出: ['Example', '123', 'test', '456']
前端中正则表达式的常用方法
search() 方法
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回第一次出现的位置（索引）。如果未找到匹配项，则返回 -1。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则的练习</title>
</head>
<body>
<script type="text/javascript">
var str = "Hello World!";
let index = str.search(/llo/i);
console.log(index) //2;
</script>
</body>
</html>
replace() 方法
replace() 方法是一个非常实用的字符串方法，用于在字符串中查找一个匹配项，并将其替换为新的子串。下面展示一些常用 使用场景的示例：
- 替换字符串中的特定字符
let str = "Hello, world!";
let newStr = str.replace("world", "快乐就是哈哈哈");
console.log(newStr); // 输出: Hello, 快乐就是哈哈哈!
- 替换字符串中的特定字符（全局替换）
默认情况下，replace() 方法只替换第一个匹配项，我们可以加上全局搜索标志 g，匹配所有。
let str = "I love 快乐就是哈哈哈. 快乐就是哈哈哈 is great.";
let newStr = str.replace(/快乐就是哈哈哈/g, "JS");
console.log(newStr); // 输出: I love JS. JS is great.
- 替换字符串中的空格
let str = "Hello 快乐就是哈哈哈!";
// 使用正则表达式替换一个或多个空格为单个空格
let newStr = str.replace(/\s+/g, " ");
console.log(newStr); // 输出: Hello 快乐就是哈哈哈!
- 删除字符串中的特定字符
我们可以通过将替换值设置为空字符串 "" 来删除字符串中的特定字符或子字符串。
let str = "Hello, world!";
let newStr = str.replace(", world!", "");
console.log(newStr); // 输出: Hello
test() 方法
用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
var patt = /e/;
let str = patt.test("Hello World!");
console.log(str) //true
exec() 方法
用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
var patt = /el/;
let str = patt.exec("Hello World!");
console.log(str) //['el', index: 1, input: 'Hello World!', groups: undefined]0]
match() 方法
- 如果正则表达式不包含
g标志（全局搜索），match()方法将返回一个数组，其中存放匹配的结果。如果没有找到任何匹配的结果，则返回null。 - 如果正则表达式包含
g标志，match()方法将返回一个包含所有匹配结果的数组
示例：
let str = "The quick brown fox jumps over the lazy dog.";
// 定义一个正则表达式来查找单词 "fox"
let regexp = /fox/;
// 使用 match() 方法查找匹配项
let match = str.match(regexp);
if (match !== null) {
// match 是一个数组，其中第一个元素是匹配的字符串
console.log("Found:", match[0]); // 输出: Found: fox
// 注意：虽然 match 数组还包含 index 和 input 属性
// console.log("Index:", match.index);
// console.log("Original String:", match.input);
} else {
console.log("找不到啊");
}
const str = "kljshhh!@#test456";
const regex = /\w+/g; // 使用 \w+ 匹配一个或多个字母数字字符（包括下划线），并加上 g 修饰符进行全局搜索
const matches = str.match(regex);
console.log(matches); // 输出: ['Example', '123', 'test', '456']
