深入浅出JavaScript正则表达式：从入门到精通，彻底掌握JS Regex的奥秘与应用！12

亲爱的代码探索者们，大家好！我是您的前端知识博主。今天，我们要聊一个让许多初学者望而却步，却又让资深开发者爱不释手的强大工具——JavaScript正则表达式。或许你看到“regx”这个词（更规范的写法是“regex”），会觉得它像一堆神秘的符号，但相信我，一旦你掌握了它，它将成为你处理字符串的“瑞士军刀”！本文将带你从零开始，系统地学习JS正则表达式，掌握其核心概念、常见方法与实战技巧，助你彻底告别正则盲区！

一、初识正则表达式：什么是“正则”？

正则表达式（Regular Expression，简称Regex或RegExp）是用于描述字符模式的工具。它能够让你在字符串中进行模式匹配、查找、替换、提取等复杂操作。想象一下，你要验证一个邮箱格式是否正确，从一大段文本中提取所有URL，或者批量替换敏感词汇，如果不用正则表达式，你可能需要编写大量的循环和条件判断代码，而有了它，一切都变得简洁高效。

在JavaScript中，正则表达式是内置的，可以通过两种方式创建：
字面量形式：`/pattern/flags`。这是最常用也推荐的方式，性能更好。
const reg1 = /abc/; // 匹配字符串中是否包含"abc"

构造函数形式：`new RegExp("pattern", "flags")`。当模式字符串是动态生成时使用。
const pattern = "abc";
const reg2 = new RegExp(pattern);

其中，`pattern`是正则表达式的主体，`flags`（修饰符）则用于改变匹配行为。

二、正则表达式核心语法：那些神秘的符号

掌握正则表达式的关键在于理解其元字符和特殊序列。

1. 元字符（Metacharacters）：具有特殊含义的字符。
`.`：匹配除换行符以外的任意单个字符。
`\d`：匹配任意一个数字 (0-9)。对应`[0-9]`。
`\D`：匹配任意一个非数字字符。对应`[^0-9]`。
`\w`：匹配任意一个字母、数字或下划线。对应`[a-zA-Z0-9_]`。
`\W`：匹配任意一个非字母、数字、下划线字符。对应`[^a-zA-Z0-9_]`。
`\s`：匹配任意一个空白字符（空格、制表符、换页符等）。
`\S`：匹配任意一个非空白字符。
`\b`：匹配单词边界。
`\B`：匹配非单词边界。
`^`：匹配字符串的开头。
`$`：匹配字符串的结尾。
`\`：转义字符，将特殊字符转为字面量，如`\.`匹配实际的点。

2. 字符类（Character Sets）：匹配指定集合中的任一字符。
`[abc]`：匹配`a`、`b`或`c`中的任意一个。
`[a-z]`：匹配任意一个小写字母。
`[0-9]`：匹配任意一个数字。
`[^abc]`：匹配除`a`、`b`、`c`以外的任意一个字符。

3. 量词（Quantifiers）：指定模式出现的次数。
`*`：匹配前一个模式0次或多次。 (`/a*/` 匹配 "", "a", "aa"...)
`+`：匹配前一个模式1次或多次。 (`/a+/` 匹配 "a", "aa"...)
`?`：匹配前一个模式0次或1次。 (`/a?/` 匹配 "", "a")
`{n}`：匹配前一个模式恰好`n`次。
`{n,}`：匹配前一个模式至少`n`次。
`{n,m}`：匹配前一个模式`n`到`m`次。

默认情况下，量词是“贪婪”的，即尽可能多地匹配。在其后加上`?`可以使其变为“非贪婪”模式，即尽可能少地匹配，如`*?`, `+?`, `??`, `{n,m}?`。

4. 分组与捕获（Groups & Capturing）：使用`()`将子表达式组合成一个整体，并可以捕获匹配到的内容。
`(pattern)`：分组，并捕获匹配到的内容。可以通过捕获组序号或名称引用。
`(?:pattern)`：非捕获分组，只分组不捕获，用于逻辑组合但不需提取内容。

5. 选择符（Alternation）：`|`表示“或”，匹配其中一个表达式。例如：`/cat|dog/` 匹配 "cat" 或 "dog"。

6. 修饰符（Flags）：改变匹配行为，写在正则末尾，如`/pattern/i`。
`i` (ignore case)：忽略大小写。
`g` (global)：全局匹配，查找所有匹配项，而不是在找到第一个后停止。
`m` (multiline)：多行模式，`^`和`$`会匹配每行的开头和结尾，而不仅仅是整个字符串的开头和结尾。

三、JavaScript中正则表达式的方法：实战应用

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

1. `RegExp` 对象的方法：
`(str)`：

检查字符串`str`是否包含匹配`regexp`模式的子串。返回布尔值`true`或`false`。 const emailReg = /\w+@\w+\.\w+/;
(("test@")); // true
(("invalid-email")); // false

`(str)`：

在一个字符串中执行搜索匹配。如果找到匹配项，返回一个数组，包含匹配的子串、捕获组等信息；如果没有找到，返回`null`。当正则带有`g`修饰符时，多次调用`exec`会从上次匹配结束的位置继续搜索，直到找不到匹配为止，非常适合遍历所有匹配项。 const str = "Hello 123 World 456";
const numReg = /\d+/g;
let match;
while ((match = (str)) !== null) {
(`Found ${match[0]} at index ${}`);
// Output:
// Found 123 at index 6
// Found 456 at index 18
}

2. `String` 对象的方法（与正则表达式结合使用）：
`(regexp)`：

查找所有匹配`regexp`模式的子串。如果`regexp`没有`g`修饰符，返回的数组类似`exec`的结果（第一个匹配及捕获组）；如果有`g`修饰符，返回一个包含所有匹配子串的数组。如果没有找到，返回`null`。 const text = "cat dog bird cat mouse";
((/cat/g)); // ["cat", "cat"]
((/bear/)); // null

`(regexp)`：

查找第一个匹配`regexp`模式的子串的起始索引。如果找到，返回索引；否则返回`-1`。`search`方法会忽略`g`修饰符。 const sentence = "The quick brown fox.";
((/brown/)); // 10
((/zebra/)); // -1

`(regexp|substr, newSubstr|function)`：

使用`newSubstr`或`function`替换匹配`regexp`模式的子串。如果没有`g`修饰符，只替换第一个匹配项；如果有`g`修饰符，替换所有匹配项。 const story = "I like apples and oranges.";
// 替换第一个
((/apples/, "bananas")); // "I like bananas and oranges."
// 替换所有
((/a/g, "*")); // "I like *pples *nd or*nges."
// 使用函数作为替换参数，可以进行更复杂的替换逻辑
const names = "John Doe, Jane Smith";
((/(\w+)\s(\w+)/g, "$2, $1")); // "Doe, John, Smith, Jane"
// $1, $2 分别代表第一个和第二个捕获组的内容
// 也可以使用函数进行更复杂的处理：
((/(\w+)\s(\w+)/g, (match, firstName, lastName) => {
return `${()}, ${firstName}`;
})); // "DOE, John, SMITH, Jane"

`(regexp|separator, limit)`：

使用`regexp`或分隔符将字符串分割成一个字符串数组。 const csv = "apple,banana,orange";
((/,/)); // ["apple", "banana", "orange"]
const sentence = "One two three four";
((/\s+/)); // ["One", "two", "three", "four"] (多个空格只算一个分隔符)

四、正则表达式实战应用场景举例

1. 表单验证：
// 邮箱验证
const isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
(isValidEmail("user@")); // true
// 手机号验证 (中国大陆简单11位)
const isValidPhone = (phone) => /^1[3-9]\d{9}$/.test(phone);
(isValidPhone("13812345678")); // true
// 密码强度 (至少6位，包含大小写字母和数字)
const isStrongPassword = (pass) => /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,}$/.test(pass);
// (?!...) 负向前瞻，(?!...) 负向后瞻
// (?=.*[a-z]) 正向前瞻，表示后面必须有小写字母
// (?=.*[A-Z]) 正向前瞻，表示后面必须有大写字母
// (?=.*\d) 正向前瞻，表示后面必须有数字
// .{6,} 匹配任意字符至少6次
(isStrongPassword("Abc123")); // true

2. 数据提取：
// 提取HTML标签中的内容
const html = "Hello

World

";
const tagContentReg = /(.*?)/g; // \1 引用第一个捕获组的内容
let match2;
while ((match2 = (html)) !== null) {
(`Tag: ${match2[1]}, Content: ${match2[2]}`);
// Output:
// Tag: span, Content: Hello
// Tag: p, Content: World
}
// 提取URL中的域名
const url = "/path/to/page?id=123";
const domainReg = /^https?:/\/(?:www\.)?([a-zA-Z0-9.-]+)/;
const matchDomain = (domainReg);
if (matchDomain) {
(matchDomain[1]); //
}

3. 文本处理与替换：
// 移除字符串两端空格
const trimSpace = (str) => (/^\s+|\s+$/g, '');
(trimSpace(" Hello World ")); // "Hello World"
// 敏感词过滤
const filterSensitiveWords = (text, sensitiveWords) => {
const reg = new RegExp(("|"), "gi");
return (reg, "*");
};
const textWithBadWords = "这是一个糟糕的 badword 示例，还有另一个 BadWord。";
const words = ["badword", "另一个"];
(filterSensitiveWords(textWithBadWords, words));
// Output: "这是一个糟糕的 * 示例，还有 *。"

五、学习正则表达式的建议

1. 从小处着手：不要一开始就想写出复杂的正则表达式，从匹配简单的字符和数字开始。
2. 勤加练习：多写多试，尝试解决各种字符串处理问题。
3. 使用在线工具：``、``等网站提供了非常棒的实时测试和解释功能，可以帮助你理解每一部分的作用。
4. 查阅文档：MDN Web Docs是学习JavaScript正则表达式的权威资源。
5. 理解“贪婪”与“非贪婪”：这是初学者常犯错误的地方，理解`*`和`*?`的区别至关重要。
6. 注意转义：当你需要匹配`.`, `*`, `+`, `?`, `{`, `}`, `(`, `)`, `[`, `]`, `|`, `^`, `$`, `\`这些特殊字符本身时，记得用`\`进行转义。

总结

JavaScript正则表达式是一个功能强大且用途广泛的工具。虽然它的语法可能初看起来有些抽象和复杂，但通过本文的学习，你应该已经掌握了其核心概念和常用方法。从简单的表单验证到复杂的数据提取和文本处理，正则表达式都能大大提高你的开发效率。记住，实践是最好的老师，多动手尝试，你会发现它比想象中更有趣、更实用！希望这篇干货文章能帮助你彻底搞懂JS Regex的奥秘，成为一名更高效的开发者！

2025-10-25

---

上一篇：告别“this”烦恼：JavaScript bindAll 的前世今生与最佳实践

下一篇：彻底搞懂！JavaScript 配合 CSS 实现网页滚动「固定」效果：吸顶、粘性与更多妙用