文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文基于 en.javascript.info 教程《量词 、*、? 和 {n}》中的配套练习「匹配 HTML 颜色」展开。该练习要求我们编写一条正则表达式从文本中提取形如#ABCDEF的十六进制颜色#后跟 6 个十六进制字符并绕开误匹配更长数字序列的经典陷阱。读完本文你将掌握字符集/范围的写法、精确量词{n}的用法、g与i标志的配合以及用单词边界\b收紧匹配边界的实战技巧可以直接套用到 CSS 颜色提取、日志解析等真实场景。1. 练习目标从 CSS 文本中提取 #RRGGBB 颜色任务原文见 任务描述要求创建一条正则表达式搜索以#ABCDEF形式书写的 HTML 颜色——先是一个#然后是 6 个十六进制字符例如let regexp /...your regexp.../ let str color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2 #12345678; alert( str.match(regexp) ) // 期望结果#121212,#AA00ef注意两个关键约束十六进制字符包含数字0-9与字母a-f/A-F颜色值大小写均可任务明确排除其它颜色格式如简写#123、rgb(1,2,3)等因此正则只需聚焦# 恰好 6 个十六进制字符这一种形态。观察示例字符串可发现f#fddee中的#fddee只有 5 个十六进制字符且前面还有一个字母f#fd2只有 3 位而#12345678则有 8 位——它们都不应被匹配这正好引出了后面要解决的边界问题。2. 第一步描述一个十六进制字符——字符集与范围正则里要表达任意一个十六进制字符最直接的工具是方括号字符集set与范围range。在教程《集合与范围 [...]》中说明方括号内可以放多个字符表示匹配其中任意一个例如[eao]匹配a、e、o中任意一个方括号内也可以写范围如[a-z]表示从a到z的任意字母、[0-5]表示 0 到 5 的任意数字。多个范围可以并列比如[0-9A-F]表示数字 0-9 或大写字母 A-F。十六进制字符集由此有两种等价写法不借助标志显式写出大小写两种范围[0-9a-fA-F]借助i标志正则的i标志使匹配忽略大小写此时只需写小写范围[0-9a-f]即可同时覆盖a-f与A-F。// 两种写法匹配能力等价配合 flag i 时 /[0-9a-fA-F]/ // 不依赖任何标志 /[0-9a-f]/i // 依赖 i 标志忽略大小写这正是原题解解决方案给出的第一块拼图一个十六进制字符可以描述为[0-9a-fA-F]若使用i标志则可以简写为[0-9a-f]。3. 第二步连续 6 个——精确量词 {6}光有一个十六进制字符还不够需要它恰好出现 6 次。这里就要用到量词。教程《量词 、*、? 和 {n}》把量词体系讲得很清楚写法含义等价写法{n}恰好 n 次\d{5}等价于\d\d\d\d\d{n,m}n 到 m 次\d{3,5}匹配 3~5 位数字{n,}至少 n 次上限省略\d{3,}匹配 3 位及以上一次或多次{1,}?零次或一次可有可无{0,1}*零次或多次{0,}原题解采用的正是最精确的形式{6}紧跟在字符集之后表示前面的字符集恰好出现 6 次。let regexp /#[a-f0-9]{6}/gi;逐段拆解这条正则#—— 普通字符匹配字面量井号[a-f0-9]—— 一个十六进制字符数字或小写字母{6}—— 前面的字符集恰好重复 6 次g—— 全局搜索返回所有匹配而不是只返回第一个i—— 忽略大小写使[a-f0-9]同时匹配A-F。作为对照同目录下的练习《匹配省略号三点以上》使用了带下限的量词\.{3,}来匹配连续 3 个及以上句点可见{n}与{n,}分别在精确次数和至少次数场景下各有用途。4. 组合运行str.match 的完整行为把正则接入字符串方法str.match(regexp)即可运行。原题解给出的完整示例let regexp /#[a-f0-9]{6}/gi; let str color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2 alert( str.match(regexp) ); // #121212,#AA00ef对照示例文本逐项验证匹配结果#121212——#后 6 个十六进制字符匹配 ✅#AA00ef—— 大写字母由i标志兜底匹配 ✅#fddee—— 只有 5 位十六进制字符不满足{6}且它前面的f属于上一个单词不匹配 ✅#fd2—— 只有 3 位不匹配 ✅。这里还涉及str.match的一个重要行为详见《模式与标志》带g标志时返回所有匹配组成的数组不带g时只返回第一个匹配附带index、input等属性没有匹配时返回null而不是空数组。因此生产代码中常用str.match(regexp) || []兜底避免对null调用属性时报错let matches JavaScript.match(/HTML/) || []; // 无匹配时安全降级为空数组5. 陷阱{6} 并不保证整个数就是 6 位看似完成了但原题解紧接着指出一个真实陷阱{6}只约束至少出现 6 次并不会检查第 7 个字符是什么。因此当文本中出现更长的数字序列时正则会从中间截取 6 位当作颜色匹配alert( #12345678.match( /#[a-f0-9]{6}/gi ) ) // #123456 —— 错误它只是长数字的一部分#12345678本来不是合法的 6 位颜色却被正则贪心地截出了#123456。同理如果一段文本是#abcdef07 位朴素写法也会错误匹配前 6 位。这也呼应了量词章节中正则越精确往往越长越复杂的规律只写核心模式很容易但加上边界约束后正则才会真正可靠。6. 修复用单词边界 \b 收紧右边界解决方案是给正则末尾追加单词边界\b// 合法颜色 alert( #123456.match( /#[a-f0-9]{6}\b/gi ) ); // #123456 // 非法颜色8 位——现在正确地不匹配 alert( #12345678.match( /#[a-f0-9]{6}\b/gi ) ); // null\b是什么教程《单词边界\b》中定义\b是一个零宽断言只做位置检查不消耗字符它要求当前位置是单词边界即满足以下三种情况之一字符串开头且首字符是单词字符\w字符串中相邻两字符一个是\w一个是非\w字符串末尾且最后一个字符是\w。其中\w等价于[a-zA-Z0-9_]。对颜色场景而言#123456中的6之后紧跟空格或字符串结尾属于单词边界所以匹配成功而#12345678中6之后紧跟着又一个数字7仍属\w6与7之间不是单词边界因此\b检查失败、整个匹配被拒绝。于是最终可靠版本为let regexp /#[a-f0-9]{6}\b/gi;需要留意\b的局限同样出自边界章节的警告由于\w只覆盖拉丁字母、数字与下划线\b对西里尔字母、中文等非拉丁字符不生效。在本任务的纯 ASCII 颜色场景下没有问题但若目标文本含其他语种字符需要自行评估边界策略。7. 实战扩展从提取到替换与进一步收紧掌握了核心正则后可以围绕它做几类常见的实战演进替换用法结合str.replace(regexp, replacement)可以把匹配到的颜色整体替换掉带g标志则替换全部匹配。例如给所有颜色加一个包装let str color:#121212; background-color:#AA00ef; alert( str.replace(/#[a-f0-9]{6}\b/gi, [$]) ); // color:[#121212]; background-color:[#AA00ef]其中替换串里的$代表整个匹配详见《模式与标志》中的替换符号表。收紧左边界本任务只约束了#前不检查但若出现f#fddee这类字母紧贴 #的文本可以通过给#前也加边界条件进一步收紧如\b或负向后顾断言这属于任务范围之外的自定义增强可根据实际文本的噪声情况决定取舍。其它颜色格式任务明确排除了#1233 位简写与rgb(1,2,3)。若日后需要支持简写可推断出/#[a-f0-9]{3}\b/gi这类相似模式再用分支alternation组合多种格式——这已经超出本练习的验收范围仅作为思路提示。8. 小结这个练习虽小却串起了正则表达式中最核心的几个构件字符集与范围[0-9a-fA-F]描述任意十六进制字符字符集章节精确量词{6}限定恰好 6 次并与{3,5}、{3,}、、?、*形成完整量词家族量词章节标志组合g全局搜索i忽略大小写让[a-f0-9]同时覆盖大写字母模式与标志章节单词边界\b作为零宽断言拒绝在长数字序列中截取伪颜色单词边界章节。最终交付的正则只有一行——/#[a-f0-9]{6}\b/gi——但它背后是字符集描述单元、量词控制次数、断言收紧边界的完整方法论这一套路可平移推广到日期、邮箱、URL、版本号等几乎所有结构化文本提取场景。完整的任务陈述与官方题解分别见 task.md 与 solution.md。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐正则表达式实战用捕获组与量词精确匹配 abc / abcdef 十六进制颜色正则表达式实战用捕获组与量词精确匹配 abc / abcdef 十六进制颜色 本文基于 Modern JavaScript Tutorial本仓库 9 re文档/教程前端用正则量词 {6} 匹配 HTML 六位十六进制颜色从 121212 到 AA00ef 的完整实战解析用正则量词 {6} 匹配 HTML 六位十六进制颜色从 121212 到 AA00ef 的完整实战解析 导读 在编写样式解析、主题提取、网页数据抓取等工具时文档/教程前端JavaScript 正则表达式教程字符集合与范围匹配JavaScript 正则表达式教程字符集合与范围匹配 什么是字符集合 在正则表达式中方括号 ... 表示一个字符集合它告诉正则引擎匹配其中任意一个字符文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考