讲师中心 微信公众号

工具推荐

视频效率加速
立刻MV
立刻MV

低成本歌曲 MV、视频生成

updream

一键生成高质量推广成片

AniShort
AniShort

AI短剧协同制作平台

剧云
剧云

中文短剧剧本制作平台

javascript中的正则表达式如何入门_从模式匹配到高级捕获的实战【教程】

酷婷姑娘_5152

酷婷姑娘_5152

发布时间:2026-01-18 08:04:02

|

267人浏览过

|

来源于php中文网

原创

JavaScript正则核心在于理解引擎执行机制而非死记语法:贪婪/惰性本质是回溯策略差异,lastIndex控制匹配位置且仅对g/y生效,捕获组编号严格按左括号顺序,替换推荐用函数避免$符号歧义。

javascript中的正则表达式如何入门_从模式匹配到高级捕获的实战【教程】

JavaScript 正则表达式不是“学完语法就能用”,而是「写错一个标志就全匹配失败」「捕获组嵌套后 $1 对不上号」「g 和 y 标志混用导致 exec() 死循环」——入门关键不在记符号,而在理解引擎如何执行、状态如何流转。

为什么 /a+/ 能匹配 "aaa",但 /a+?/ 在 matchAll() 中表现不同?

贪婪与惰性本质是回溯策略差异,不是“多匹配”或“少匹配”的简单描述。JS 正则引擎(V8)默认贪婪,会先吞掉所有可能字符,再逐步吐出试探;惰性则相反,先试最小长度,不成就扩展。

  • /a+/ 在 "aaab" 中匹配整个 "aaa",一次到位
  • /a+?/ 在 "aaab" 中匹配第一个 "a",后续调用 exec() 才继续推进
  • matchAll() 返回迭代器,每次调用内部都重置 lastIndex(除非带 g 或 y),所以惰性量词在 matchAll(/a+?/g) 中会逐个返回 "a",而非单次返回 "aaa"

exec() 的 lastIndex 是什么?为什么带 g 的正则在循环中会跳过匹配?

lastIndex 是正则实例的可读写属性,表示下一次匹配的起始索引。它只对带 g(全局)或 y(粘连)标志的正则生效,且仅在 exec() 和 test() 中被自动更新。

  • 不手动重置 lastIndex = 0,重复调用 exec() 会从上次结束位置继续,可能漏掉开头匹配
  • y 比 g 更严格:要求匹配必须从 lastIndex 开始,不能跳过任何字符,否则直接返回 null
  • 多个线程(或闭包中复用同一正则实例)时,lastIndex 是共享状态,极易引发竞态 —— 推荐每次用新字面量 /(...)/g,或显式 new RegExp(..., 'g')

捕获组嵌套时,result[1] 到底对应哪个括号?

捕获组编号严格按左括号 ( 出现顺序从 1 开始递增,和是否嵌套、是否命名无关。命名组((?<name>...)</name>)只是提供别名,不改变编号逻辑。

JavaScript 开发专家
JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

立即学习“Java免费学习笔记(深入)”;

const re = /a((b)(c(d)))/;
const str = "abcbd";
const result = re.exec(str);
// result[0] → "abcbd"(完整匹配)
// result[1] → "bcbd"(外层第一个 ( ... ))
// result[2] → "b"(第二个 (b))
// result[3] → "cd"(第三个 (c(d)))
// result[4] → "d"(最内层 (d))
  • 非捕获组 (?:...) 不占编号,可用于分组但不提取
  • 命名组如 /(?<main>a((b)(c(d))))/</main>,可通过 result.groups.main 访问,但编号仍为 1
  • 如果某组未参与匹配(比如 /(a)?b/ 中 a 缺失),对应项为 undefined,不是空字符串

替换时 $1、$&、$$ 这些符号怎么用才不翻车?

字符串替换中的 $ 符号是特殊元字符,只在 String.prototype.replace() 的第二个参数为字符串时生效。函数作为替换参数时,完全绕过这套机制,更可控。

  • $1 → 第一个捕获组内容;$& → 整个匹配字符串;$$ → 字面量 $
  • 若捕获组为空或未匹配,$1 直接消失(不是报错),容易造成意外截断
  • 动态替换强烈建议用函数:
    str.replace(/(\w+):(\w+)/g, (match, key, value) => `${key.toUpperCase()}:${value}`)
    ,避免 $ 解析歧义和转义混乱
  • 注意:函数参数顺序固定为 (match, p1, p2, ..., offset, string),不要依赖命名

真正卡住人的从来不是「怎么写正则」,而是「为什么这次没匹配上」——打开浏览器控制台,用 console.log(re.lastIndex) 和 re.exec(str) 单步看返回值,比查文档快十倍。正则没有隐藏行为,只有你没看见的状态。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4976

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

3441

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

9602

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

832

2023.08.11

正则表达式空格
正则表达式空格

正则表达式空格可以用“s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。本专题为大家提供正则表达式相关的文章、下载、课程内容,供大家免费下载体验。

540

2023.08.31

Python爬虫获取数据的方法
Python爬虫获取数据的方法

Python爬虫可以通过请求库发送HTTP请求、解析库解析HTML、正则表达式提取数据,或使用数据抓取框架来获取数据。更多关于Python爬虫相关知识。详情阅读本专题下面的文章。php中文网欢迎大家前来学习。

693

2023.11.13

正则表达式空格如何表示
正则表达式空格如何表示

正则表达式空格可以用“s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。想了解更多正则表达式空格怎么表示的内容,可以访问下面的文章。

406

2023.11.17

正则表达式中如何匹配数字
正则表达式中如何匹配数字

正则表达式中可以通过匹配单个数字、匹配多个数字、匹配固定长度的数字、匹配整数和小数、匹配负数和匹配科学计数法表示的数字的方法匹配数字。更多关于正则表达式的相关知识详情请看本专题下面的文章。php中文网欢迎大家前来学习。

739

2023.12.06

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

20

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn