文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文基于 Modern JavaScript Tutorial本仓库 9-regular-expressions 章节中的经典练习展开编写一个正则表达式从文本中匹配 CSS 十六进制颜色#abc3 位与#abcdef6 位且要求既不多匹配拒绝 4 位如#abcd也不少匹配。读完本文你将掌握捕获组与量词{1,2}的组合用法、词边界\b的防误匹配技巧以及str.match配合g/i标志的完整实战模式。任务背景CSS 十六进制颜色格式CSS 中十六进制颜色有两种标准写法3 位缩写形式#rgb如#3f3和 6 位完整形式#rrggbb如#AA00ef。其中r、g、b均为十六进制数字即字符0-9或a-f大小写均可。本练习的完整任务描述位于 task.md要求如下匹配#后跟3 或 6 个十六进制数字的颜色恰好3 或 6 位4 位字符串如#abcd不得匹配测试文本为color: #3f3; background-color: #AA00ef; and: #abcd期望输出#3f3与#AA00ef两个结果。第一步匹配单个三位十六进制色先解决最小问题匹配#后跟 3 个十六进制数字。十六进制数字的字符集合是a-f与0-9用字符集character set表示即pattern:[a-f0-9]字符集的详细介绍见 字符类章节 后续的字符集与区间讲解。跟上恰好 3 个的量词pattern:{3}就得到let regexp /#[a-f0-9]{3}/i;这里有两个关键点pattern:{3}是精确计数量词表示前面的元素重复恰好 3 次等价于pattern:[a-f0-9][a-f0-9][a-f0-9]量词{n}的完整说明见 量词章节标志pattern:i使匹配忽略大小写从而同时接受#abc与#ABC。若去掉它#AA00ef中的大写字母AA和EF就无法匹配。第二步用捕获组让量词作用于整体现在需要扩展为3 位或 6 位。直观想法是用量词pattern:{1,2}一个 3 位的十六进制块出现 1 次就是 3 位颜色出现 2 次就是 6 位颜色且不可能出现 3 次即 9 位因为量词上限是 2。但量词只能作用于它前面的一个元素。要让{1,2}作用于整个 3 位块必须用括号把pattern:[a-f0-9]{3}包起来——这正是**捕获组capturing group**的核心作用之一让量词作用于括号整体。let regexp /#([a-f0-9]{3}){1,2}/i;捕获组的原理在 捕获组章节 中有系统讲解括号pattern:(...)有两个效果——一是把匹配内容作为独立项放入结果数组二是把括号整体作为一个单元供后续量词重复。这里我们利用的是第二个效果pattern:([a-f0-9]{3}){1,2}表示3 位十六进制块重复 1 或 2 次。注意量词{1,2}是**贪婪greedy**的在 6 位颜色上它会优先尝试匹配 2 次即 6 位只在失败时才回退到 1 次。贪婪/回溯的完整算法见 贪婪与惰性量词章节。第三步添加g标志一次性找出全部颜色在浏览器或 Node 环境中运行如下完整示例来自 solution.mdlet regexp /#([a-f0-9]{3}){1,2}/gi; let str color: #3f3; background-color: #AA00ef; and: #abcd; alert( str.match(regexp) ); // #3f3 #AA00ef #abc标志pattern:g让str.match返回所有匹配组成的数组。此时的输出为#3f3、#AA00ef以及一个多余的#abc——问题出现了。第四步发现边界误匹配观察测试字符串中的#abcd它是 4 位十六进制按任务要求不应匹配。但上面的正则把#abc前 3 位当成了一个合法的 3 位颜色在#abcd内部完成了匹配结果多输出了一个#abc。原因在于正则引擎从#abcd的第 0 位#开始尝试#匹配[a-f0-9]{3}贪婪地吃掉abc量词{1,2}尝试再来一组但下一个字符d之后没有第 7 个字符可凑成第二组于是回退为只匹配 1 组匹配成功——完全没有意识到后面还跟着一个d。第五步用词边界\b切断误匹配解决方案是在模式末尾追加词边界断言pattern:\blet regexp /#([a-f0-9]{3}){1,2}\b/gi; let str color: #3f3; background-color: #AA00ef; and: #abcd; alert( str.match(regexp) ); // #3f3 #AA00efpattern:\b是一个零宽度的位置断言它检查当前位置是否为词边界。根据 词边界章节 的定义满足以下三种情况之一即为词边界字符串开头且首字符是单词字符\w两个相邻字符中一个是单词字符\w、另一个不是字符串结尾且末字符是单词字符\w。这里\w指拉丁字母、数字或下划线。套用到本例在#3f3之后是分号;——3是单词字符;不是二者交界处是词边界\b成立匹配成功在#AA00ef之后是分号——同理成立匹配成功在#abc之后紧跟着d——c与d都是单词字符交界处不是词边界\b失败整个#abcd从#开始的匹配被否决正则引擎转而尝试下一个位置最终不再产生多余匹配。于是输出精确地收敛为#3f3与#AA00ef与任务期望完全一致。扩展思考与相关变式改用非捕获组?:如果只想借括号让量词作用于整体、却不想让[a-f0-9]{3}的内容作为独立数组项返回可以把捕获组换成非捕获组pattern:(?:...)let regexp /#(?:[a-f0-9]{3}){1,2}\b/gi; // str.match(regexp) 仍返回 [#3f3, #AA00ef] // 但每个匹配不再附带额外的分组内容非捕获组?:的机制同样收录于 捕获组章节。兄弟练习匹配 6 位十六进制颜色本仓库 量词章节 下另有一个变式练习 find-html-colors-6hex专门匹配恰好 6 位十六进制颜色。其解答思路与本文形成对照先写出 6 位模式再附加排除条件可对比学习量词边界控制的两种不同取舍。兄弟练习MAC 地址捕获组章节 的 MAC 地址练习用到了同类手法pattern:[0-9a-f]{2}(:[0-9a-f]{2}){5}——先用{2}限定单组再用捕获组 {5}重复整组并通过^...$锚定整体。它与本文用括号把原子块包起来再叠量词的思路完全同构可互相印证。小结本练习浓缩了四个正则核心知识点的协同运用知识点本练习中的应用仓库中的完整讲解字符集[a-f0-9]表达十六进制数字集合字符类章节量词{3}、{1,2}精确 3 位、允许 1 或 2 组量词章节捕获组(...)让量词作用于 3 位块整体捕获组章节词边界\b拒绝 4 位等超长十六进制串词边界章节最终可复用的正则表达式为/#([a-f0-9]{3}){1,2}\b/gi拆解读法#字面量 → 捕获组([a-f0-9]{3})3 位十六进制块→ 贪婪量词{1,2}整块重复 1 或 2 次→ 词边界\b拒绝后续紧跟十六进制字符的误匹配→g全局搜索、i忽略大小写。这一原子块 捕获组 边界收尾的组合模式在颜色、MAC 地址、日期、域名等一切固定长度分块文本的解析中都可直接复用。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐N_m3u8DL-RE 完整指南一键下载加密 DASH 流N_m3u8DL RE 完整指南一键下载加密 DASH 流 你手里只有一个 .mpd 链接课程却用了 CENC 加密页面能看不能存换三个工具都没跑通。NCLI音视频YARA字符串匹配完全指南文本、十六进制与正则表达式全解析YARA字符串匹配完全指南文本、十六进制与正则表达式全解析 YARA 是安全领域公认的模式匹配瑞士军刀The pattern matching s网络安全模式匹配JavaScript 正则表达式实战用惰性量词精确匹配 HTML 注释附贪心陷阱解析JavaScript 正则表达式实战用惰性量词精确匹配 HTML 注释附贪心陷阱解析 本篇指南以 JavaScript 教程仓库中的实战任务为线索讲解如文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考