正则表达式在JS中的使用教程
时间:2026-04-03 14:54:16 268浏览 收藏
JavaScript正则表达式真正的难点不在于语法本身,而在于三大易错核心:RegExp实例创建方式导致的转义陷阱(尤其动态拼接时双反斜杠的坑)、标志位(尤其是g)对方法行为的深层影响(如exec()的lastIndex状态残留)、以及各方法(match、exec、replace等)返回值结构的差异与陷阱(如match无匹配返回null而非空数组、$符号仅在正则参数下生效)。掌握这些底层机制,才能避开“写对了却跑不通”的常见困境,让正则真正稳定可靠地落地。

JavaScript 中的正则表达式不是“学完就能用”,而是“用错一次就卡半天”——关键在 RegExp 实例的创建方式、标志位行为、以及方法返回值结构这三点。
为什么 /pattern/g 和 new RegExp('pattern', 'g') 行为有时不一致?
主要差异在转义和动态构建场景:/\d+/g 里反斜杠直接生效;而 new RegExp('\\d+', 'g') 中字符串需双写反斜杠,否则 '\d+' 会被 JS 解析成字面量 d+(因为 \d 不是合法转义,被静默忽略)。
- 动态拼接时必须用
new RegExp,但记得对特殊字符手动转义(比如用户输入的$、.、[等) /.../字面量无法插入变量,想插就得走new RegExp(`...${var}...`, 'g')- 全局标志
g影响exec()的 lastIndex,多次调用会“记住位置”,重用前要手动重置regex.lastIndex = 0
String.prototype.match() 返回 null 还是数组?
没匹配到永远返回 null,不是空数组。带 g 标志时只返回匹配内容数组(无捕获组信息);不带 g 时返回含 index、input 和捕获组的数组(即使没分组,第 0 项也是完整匹配)。
- 别直接对
match()结果调用.length或[0],先判null - 需要捕获组又想全局匹配?改用
regexp.exec(str)循环,它每次返回单次匹配详情 - ES2020+ 可用
matchAll(),返回迭代器,天然支持捕获组 + 全局,但注意旧环境不兼容
替换字符串时,$1、$& 这些符号怎么用才不出错?
它们只在 String.prototype.replace() 的 replacement 参数中生效,且仅当第一个参数是正则(不是字符串)时解析。常见误用:把 str.replace(/a/, '$1') 当成捕获,其实没括号,$1 就是字面量 $1。
$&是整个匹配,$1是第一个捕获组,$`是匹配前内容,$'是匹配后内容- 函数作为 replacement 时,参数顺序固定:
(match, p1, p2, ..., offset, string),比$符号更可控 - 如果 replacement 来自用户输入,务必避免直接拼接
$符号,优先用函数形式
真正难的不是写对一个正则,而是搞清它在哪个方法里跑、标志位是否开启、返回值结构怎么解构——尤其是 lastIndex 和 null 判定,漏掉这两点,90% 的“正则失效”问题就解决了。
文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《正则表达式在JS中的使用教程》文章吧,也可关注golang学习网公众号了解相关技术文章。
相关阅读
更多>
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
328 收藏
-
204 收藏
-
255 收藏
-
255 收藏
-
406 收藏
-
467 收藏
-
273 收藏
-
170 收藏
-
298 收藏
-
440 收藏
-
279 收藏
-
344 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习