0

0

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

夢幻星辰

夢幻星辰

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

|

187人浏览过

|

来源于php中文网

原创

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

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

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

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

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

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

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

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

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

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

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

雾象
雾象

WaytoAGI推出的AI动画生成引擎

下载

立即学习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))))/,可通过 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

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

531

2023.06.20

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

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

258

2023.07.05

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

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

766

2023.07.05

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

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

219

2023.08.11

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

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

357

2023.08.31

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

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

293

2023.11.13

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

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

245

2023.11.17

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

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

547

2023.12.06

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号