异常教程
javascript 正则表达式（长文讲解）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观
前言：为什么 JavaScript 正则表达式是开发者的必备工具？
在现代 Web 开发中，文本处理是一个高频需求场景。无论是表单验证、日志解析，还是 URL 解析，开发者都需要一种高效且灵活的文本匹配工具。JavaScript 正则表达式（Regular Expression）正是为此而生的“瑞士军刀”。它通过特定语法定义匹配规则，能在字符串中快速定位、替换或提取目标内容。对于编程初学者，正则表达式可能显得抽象；但通过循序渐进的讲解和实际案例，我们能将其转化为得心应手的技能。
一、基础语法：正则表达式的核心结构
1. 正则表达式的定义方式
JavaScript 中的正则表达式通过斜杠 / 括起定义，例如 /pattern/flags。其中：
pattern是匹配规则的核心部分flags是可选的标志符，用于控制匹配行为（如大小写不敏感）
示例代码：
const pattern = /hello/; // 基础模式
const caseInsensitive = /HELLO/i; // i 标志符表示忽略大小写
const globalSearch = /\d+/g; // g 标志符表示全局匹配
2. 字符与元字符的区别
普通字符（如 a-z、0-9）按字面意义匹配，而元字符（如 .、*、^）具有特殊含义。当需要匹配元字符本身时，需用反斜杠 \ 转义。
比喻说明：
元字符就像交通信号灯中的特殊符号，它们告诉正则引擎“接下来要执行特定操作”——例如 . 表示“任意字符”，* 表示“重复前一个字符0次或多次”。
二、元字符详解：掌握正则表达式的核心规则
以下表格总结了 JavaScript 正则表达式中常用的元字符及其作用：
| 元字符 | 作用说明 | 示例 | 匹配结果 |
|---|---|---|---|
. | 匹配任意单个字符（除换行符外） | /a.c/ | 匹配 "abc"、"a3c"，但不匹配 "ac" |
^ | 匹配字符串开头 | /^start/ | 匹配 "start now"，但不匹配 "now start" |
$ | 匹配字符串结尾 | /end$/ | 匹配 "finish end"，但不匹配 "end finish" |
* | 匹配前项0次或多次 | /go*gle/ | 匹配 "ggle"（0次）、"google"（2次） |
+ | 匹配前项1次或多次 | /go+gle/ | 匹配 "google"，但不匹配 "ggle" |
? | 匹配前项0次或1次 | /colou?r/ | 匹配 "color"（美式）和 "colour"（英式） |
{n,m} | 匹配前项至少n次，至多m次 | /a{1,3}/ | 匹配 "a"、"aa"、"aaa" |
三、常见应用场景与实战案例
1. 表单验证：提升用户输入质量
正则表达式是验证邮箱、手机号等输入的利器。例如验证中国手机号格式：
// 匹配 11 位数字，以1开头，第二位为3-9的任意数字
const phoneRegex = /^1[3-9]\d{9}$/;
console.log(phoneRegex.test("13812345678")); // true
console.log(phoneRegex.test("1234567890")); // false（不足11位）
2. 字符串替换：批量修改文本内容
使用 replace() 方法结合正则表达式，可实现复杂替换：
// 将所有数字替换为星号
const text = "密码是 123456 和 7890";
const masked = text.replace(/\d+/g, "***");
console.log(masked); // "密码是 *** 和 ***"
3. 数据提取：从文本中精准捕获信息
通过捕获组 () 和 exec() 方法提取 URL 参数：
const url = "https://example.com?search=hello&page=2";
const regex = /search=([^&]+)&page=([^&]+)/;
const match = regex.exec(url);
console.log(match[1]); // "hello"
console.log(match[2]); // "2"
四、进阶技巧：提升正则表达式的灵活性
1. 组捕获与非捕获组
- 捕获组
()：将匹配内容存入数组 - 非捕获组
(?:...)：仅分组不存储 - 反向引用
\1：引用前面捕获组的内容
示例：
// 验证重复密码
const regex = /^(?=.*\d).{6,12}$/; // 至少包含1个数字，6-12位
// 反向引用示例：匹配相同前后缀
const pattern = /(\d{3})-(\1)/; // 匹配 "123-123"
2. 非贪婪模式：控制匹配的“贪心程度”
默认模式是贪婪匹配（尽可能多匹配），添加 ? 可变为非贪婪：
const html = "<div>内容1</div><div>内容2</div>";
// 贪婪模式匹配整个字符串
console.log(/<div>.*<\/div>/.exec(html)[0]); // "<div>内容1</div><div>内容2</div>"
// 非贪婪模式匹配最小范围
console.log(/<div>.*?<\/div>/.exec(html)[0]); // "<div>内容1</div>"
3. 正向预查与反向预查
- 正向预查
(?=...)：断言后续存在指定模式 - 反向预查
(?<!...)：断言前面不存在指定模式
案例：
// 匹配以 http 开头但不包含 https 的 URL
const regex = /http(?!\s)/; // 需配合其他规则使用
五、调试与最佳实践：避免常见陷阱
1. 测试方法的选择
test()：返回布尔值，判断是否存在匹配exec()：返回详细匹配信息，包含索引和捕获组match()：返回所有匹配结果的数组
2. 常见错误与解决方案
- 未转义元字符：特殊字符如
.需用\转义 - 全局匹配漏掉标志符：忘记添加
/g导致只匹配第一个 - 边界条件忽略：未处理空字符串或超长输入
调试工具推荐：
- 使用在线工具 Regex101 可视化调试
- 在代码中配合
console.log()输出匹配结果
结论：让正则表达式成为你的文本处理利器
通过本文的讲解，我们系统掌握了 JavaScript 正则表达式从基础到进阶的用法。它不仅是文本处理的“瑞士军刀”，更是提升开发效率的重要工具。建议读者通过以下方式深化理解：
- 从简单案例开始练习（如邮箱验证）
- 使用在线工具逐步调试复杂规则
- 在真实项目中应用（如日志解析、URL 解析）
记住，正则表达式的精妙之处在于“用最少的代码完成最精准的匹配”。随着实践的深入，你会逐渐体会到它带来的开发效率提升。当面对复杂的文本处理需求时，不妨先画出“规则草图”，再转化为正则表达式——这正是它最迷人的地方。