JavaScript正则表达式：从入门到精通，玩转文本匹配的瑞士军刀！203

好的，作为一名中文知识博主，我将为您撰写一篇关于JavaScript正则表达式的深度文章，并提供一个符合搜索习惯的标题。
---

亲爱的编程探索者们，大家好！我是你们的老朋友，专注于分享编程知识的博主。今天，我们要聊一个让无数开发者又爱又恨，但一旦掌握便能大幅提升效率的“魔法”工具——JavaScript正则表达式（Regular Expression，简称RegEx或RegExp）。你是否曾为处理复杂的字符串数据而头疼？是否曾希望有一种方法能像“智能筛选器”一样，从海量文本中精确地找出你需要的信息，或者进行批量替换？那么，恭喜你，正则表达式就是那把为你量身打造的“瑞士军刀”！

在今天的文章中，我将带领大家从零开始，逐步深入了解JavaScript正则表达式的奥秘。无论你是初学者还是希望进一步提升技能的开发者，本文都将为你提供一份详尽的指南。我们将涵盖正则表达式的基础概念、核心语法、JavaScript中如何使用它，以及各种实用场景下的应用示例。准备好了吗？让我们一起开启这段文本匹配的奇妙旅程吧！

一、什么是JavaScript正则表达式？

正则表达式，简单来说，就是一种用于描述、匹配字符串模式的强大工具。它通过一系列预定义的特殊字符和普通字符的组合，构成一个“规则表达式”，然后根据这个表达式去检查一个字符串是否符合某种模式，或者从中提取出符合模式的部分。在JavaScript中，正则表达式是内置的，可以直接创建和使用。

它的主要作用包括：

数据验证： 检查用户输入是否符合特定格式，如邮箱、手机号、密码强度等。
文本搜索： 在大量文本中快速查找符合特定模式的子字符串。
文本替换： 将符合某种模式的字符串替换为其他内容。
字符串提取/解析： 从复杂字符串中提取出想要的数据，如URL参数、HTML标签内容等。

如何在JavaScript中创建正则表达式？

在JavaScript中，创建正则表达式有两种主要方式：

1. 字面量方式 (Literal Notation)： 这是最常用也是最推荐的方式，当你知道正则表达式模式并且它不会改变时使用。

const pattern1 = /abc/; // 匹配字符串中包含 "abc" 的部分
const pattern2 = /\d+/g; // 匹配一个或多个数字，全局匹配

语法：`/pattern/flags`。`pattern` 是你的正则表达式，`flags` 是可选的修饰符。

2. RegExp 构造函数 (Constructor Function)： 当正则表达式模式是动态生成（例如，来自用户输入或变量）时，或者包含特殊字符需要转义时，可以使用 `RegExp` 构造函数。

const searchString = "hello";
const pattern3 = new RegExp(searchString); // 等同于 /hello/
const pattern4 = new RegExp("\\d+", "g"); // 注意：字符串中的反斜杠需要双重转义

语法：`new RegExp("pattern", "flags")`。这里的 `pattern` 是一个字符串。

二、正则表达式的核心语法与特殊字符

正则表达式的强大之处在于其丰富的特殊字符和语法规则。理解它们是掌握正则表达式的关键。

1. 字符匹配器 (Character Matching)

普通字符： 大部分字符都直接匹配自身，如 `a` 匹配 `a`，`abc` 匹配 `abc`。
`.` (点号)： 匹配除换行符（``、`\r`）以外的任何单个字符。
`[]` (字符集)： 匹配方括号内的任何一个字符。

`[abc]` 匹配 `a`、`b` 或 `c`。
`[0-9]` 匹配任何数字（等同于 `\d`）。
`[a-zA-Z]` 匹配任何大小写字母。

`[^]` (负向字符集)： 匹配不在方括号内的任何一个字符。

`[^abc]` 匹配除 `a`、`b`、`c` 以外的任何字符。
`[^0-9]` 匹配任何非数字字符（等同于 `\D`）。

2. 预定义字符类 (Predefined Character Classes)

这些是常用的字符集的简写形式，大大提高了可读性：

`\d`：匹配任何数字字符 (0-9)。等同于 `[0-9]`。
`\D`：匹配任何非数字字符。等同于 `[^0-9]`。
`\w`：匹配任何单词字符（字母、数字或下划线）。等同于 `[a-zA-Z0-9_]`。
`\W`：匹配任何非单词字符。等同于 `[^a-zA-Z0-9_]`。
`\s`：匹配任何空白字符（空格、制表符、换页符等）。等同于 `[\f\r\t\v]`。
`\S`：匹配任何非空白字符。等同于 `[^\f\r\t\v]`。

3. 量词 (Quantifiers)

量词用于指定其前一个字符或字符组出现的次数：

`*`：匹配前一个元素零次或多次。等同于 `{0,}`。
`+`：匹配前一个元素一次或多次。等同于 `{1,}`。
`?`：匹配前一个元素零次或一次。等同于 `{0,1}`。
`{n}`：匹配前一个元素恰好 `n` 次。
`{n,}`：匹配前一个元素至少 `n` 次。
`{n,m}`：匹配前一个元素至少 `n` 次，但不超过 `m` 次。

贪婪模式 vs. 非贪婪模式： 默认情况下，量词是“贪婪的”，即尽可能多地匹配字符。在量词后面加上 `?` 可以使其变为“非贪婪的”（或称“惰性的”），即尽可能少地匹配字符。

const text = "

Hello

World

";
const greedyRegex = /<div>.*<\/div>/; // 贪婪模式，匹配整个字符串 "

Hello

World

"
const lazyRegex = /<div>.*?<\/div>/; // 非贪婪模式，匹配 "

Hello

" 和 "

World

4. 定位符 (Anchors)

定位符不匹配任何字符，它们匹配的是字符出现的位置：

`^`：匹配字符串的开头。在多行模式（`m` 标志）下，也匹配每一行的开头。
`$`：匹配字符串的结尾。在多行模式（`m` 标志）下，也匹配每一行的结尾。
`\b`：匹配单词边界。一个单词字符与一个非单词字符之间，或单词字符与字符串开头/结尾之间。
`\B`：匹配非单词边界。

/^hello/ // 匹配以 "hello" 开头的字符串
/world$/ // 匹配以 "world" 结尾的字符串
/\bcat\b/ // 匹配独立的单词 "cat"，不匹配 "category" 或 "tomcat"

5. 分组与捕获 (Grouping and Capturing)

使用 `()` 可以将多个字符组合成一个单元，作为整体进行操作。同时，被括号括起来的部分也会被“捕获”起来，方便后续提取。

`(pattern)`：捕获组。匹配 `pattern`，并将其匹配到的内容存储起来。
`(?:pattern)`：非捕获组。匹配 `pattern`，但不存储其匹配到的内容。用于单纯地分组，不关心捕获结果。

// 捕获日期中的年、月、日
const dateRegex = /(\d{4})-(\d{2})-(\d{2})/;
const result = "2023-10-26".match(dateRegex);
(result); // ["2023-10-26", "2023", "10", "26", ...]

6. 选择符 (Alternation)

`|`：逻辑或。匹配 `|` 符号前或后的任何一个表达式。

/cat|dog/ // 匹配 "cat" 或 "dog"

7. 转义字符 (Escaping Characters)

如果想匹配正则表达式中的特殊字符本身（如 `.`、`*`、`?`、`+`、`(`、`)`、`[`、`]`、`{`、`}`、`^`、`$`、`|`、`\`），需要在其前面加上反斜杠 `\` 进行转义。

/\./ // 匹配字面量点号 "."
/C\+\+/ // 匹配 "C++"

8. 修饰符/标志 (Flags)

修饰符放在正则表达式的结尾，用于改变匹配行为。

`g` (global)：全局匹配。找到所有匹配项，而不是在第一个匹配项后停止。
`i` (case-insensitive)：不区分大小写匹配。
`m` (multiline)：多行匹配。`^` 和 `$` 不仅匹配整个字符串的开头和结尾，还匹配每一行的开头和结尾（由 `` 或 `\r` 分隔）。
`u` (unicode)：启用Unicode模式。处理更大的Unicode字符集，正确处理代理对。
`s` (dotAll)：`s` 标志使得 `.` 可以匹配包括换行符在内的所有字符。
`d` (hasIndices)：自 ES2022 起，为匹配结果数组添加 `indices` 属性，指示每个捕获组的起始和结束索引。

三、JavaScript中的正则表达式方法

JavaScript提供了多种方法来结合正则表达式进行字符串操作。

1. RegExp 对象的方法

`test(string)`：
检查字符串中是否存在与正则表达式匹配的模式。返回 `true` 或 `false`。

const regex = /hello/;
(("hello world")); // true
(("hi there")); // false

`exec(string)`：
执行正则匹配操作。如果找到匹配，返回一个数组，包含匹配的子字符串以及所有捕获组；如果没有找到，返回 `null`。
带有 `g` 标志时，`exec()` 会保持 `lastIndex` 属性，从而可以进行连续匹配。

const regexG = /\d+/g;
const text = "我有100个苹果和200个香蕉。";
let match;
while ((match = (text)) !== null) {
(`找到了: ${match[0]}，索引: ${}`);
// 每次调用，都会更新
}
// 输出:
// 找到了: 100，索引: 2
// 找到了: 200，索引: 7

2. String 对象的方法

`match(regex)`：
查找所有匹配的项。

如果没有 `g` 标志，返回的数组与 `exec()` 类似（第一个匹配项和捕获组）。
如果有 `g` 标志，返回一个包含所有匹配子字符串的数组。如果没有匹配到，返回 `null`。

const text = "Apple, Banana, Orange";
((/a/)); // ["a", index: 1, input: "...", groups: undefined]
((/a/g)); // ["a", "a", "a", "a"]
((/xyz/g)); // null

`matchAll(regex)` (ES2020)：
返回一个迭代器，其中包含所有匹配项的完整信息（类似 `exec()` 的结果），即使没有 `g` 标志也能迭代所有匹配。必须配合 `g` 标志使用，否则会抛出错误。

const text = "Red, Green, Blue";
const regex = /\w+/g;
for (const match of (regex)) {
(match[0], );
}
// 输出:
// Red 0
// Green 5
// Blue 12

`search(regex)`：
查找匹配项的起始索引。如果找到，返回第一个匹配项的起始索引；如果没有找到，返回 `-1`。

const text = "hello world";
((/world/)); // 6
((/javascript/)); // -1

`replace(regex|substring, replacement|function)`：
替换字符串中的匹配项。

`replacement` 可以是字符串或一个函数。
如果没有 `g` 标志，只替换第一个匹配项。
如果有 `g` 标志，替换所有匹配项。

const text = "Cat, dog, cat.";
((/cat/i, "pet")); // "pet, dog, cat." (只替换第一个)
((/cat/gi, "pet")); // "pet, dog, pet." (全局替换)
// 使用函数作为替换参数
const names = "John Doe, Jane Smith";
const formattedNames = (/(\w+)\s(\w+)/g, (match, firstName, lastName) => {
return `${()}, ${firstName}`;
});
(formattedNames); // "DOE, John, SMITH, Jane"

`replaceAll(regex|substring, replacement|function)` (ES2021)：
与 `replace()` 类似，但它默认会替换所有匹配项，无需 `g` 标志（如果第一个参数是字符串，则不需要 `g`，如果是正则表达式，则必须带 `g` 标志，否则会抛出错误）。

const text = "Banana, banana, Orange";
(("banana", "APPLE")); // "Banana, APPLE, Orange"
((/banana/gi, "APPLE")); // "APPLE, APPLE, Orange"

`split(separator|regex, limit)`：
使用分隔符（可以是字符串或正则表达式）将字符串分割成数组。

const csv = "Apple,Banana,Orange";
((",")); // ["Apple", "Banana", "Orange"]
const words = "Hello world! How are you?";
((/\s+/)); // ["Hello", "world!", "How", "are", "you?"]

四、实用案例分析

理论结合实践，让我们看几个实际应用场景。

1. 邮箱地址验证

一个相对通用的邮箱验证正则：

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
(("test@")); // true
(("invalid-email")); // false

解释：

`^`：字符串开头。
`[a-zA-Z0-9._%+-]+`：用户名，允许字母、数字、点、下划线、百分号、加号、减号，至少一个。
`@`：匹配 `@` 符号。
`[a-zA-Z0-9.-]+`：域名，允许字母、数字、点、减号，至少一个。
`\.`：匹配点号（需要转义）。
`[a-zA-Z]{2,}`：顶级域名，至少两个字母。
`$`：字符串结尾。

2. 手机号码验证 (中国大陆)

一个简单的中国大陆手机号验证（11位，1开头，第二位是3-9）：

const phoneRegex = /^1[3-9]\d{9}$/;
(("13812345678")); // true
(("12345678901")); // false (第二位不是3-9)
(("1381234567")); // false (少一位)

3. 提取 URL 参数

从URL中提取特定参数的值：

function getUrlParam(url, param) {
const regex = new RegExp(`[?&]${param}(=([^&#]*))?`);
const match = (regex);
return match ? decodeURIComponent(match[2] || "") : null;
}
const url = "/path?id=123&name=test%20user#hash";
(getUrlParam(url, "id")); // "123"
(getUrlParam(url, "name")); // "test user"
(getUrlParam(url, "foo")); // null

解释：

`[?&]`：匹配 `?` 或 `&` 符号。
`${param}`：动态插入参数名。
`(=([^&#]*))?`：这是一个可选的捕获组，匹配 `=` 后面跟着任意非 `&` 或 `#` 的字符零次或多次。第二个捕获组 `([^&#]*)` 捕获参数值。

4. 批量替换敏感信息

隐藏手机号中间四位：

const phoneNumber = "13812345678";
const hiddenNumber = (/(\d{3})(\d{4})(\d{4})/, "$1$3");
(hiddenNumber); // "1385678"

这里的 `$1`, `$3` 是对捕获组的引用。

五、学习与调试正则表达式的技巧

学习正则表达式并非一蹴而就，需要大量的练习和调试。以下是一些实用建议：

从小处着手： 遇到复杂模式时，不要试图一次性写出完整的正则。先从匹配最小单元开始，逐步添加和测试。
使用在线工具： 强烈推荐使用像或这样的在线正则表达式测试工具。它们提供了实时的匹配结果、详细的解释以及各种语言的语法高亮，是学习和调试的神器。
多测试不同输入： 确保你的正则表达式在各种有效和无效的输入下都能正确工作。考虑边缘情况。
理解贪婪与非贪婪： 这是初学者常犯错误的地方。仔细区分 `*` 和 `*?` 等量词的行为。
查阅文档： 遇到不熟悉的特殊字符或语法，及时查阅MDN等官方文档。
多练习，多实践： 正则表达式的掌握需要持续的练习。尝试解决实际问题，如数据清洗、日志分析等。