文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载正则表达式中的量词quantifier是构建复杂匹配模式的核心积木它们决定一个字符、字符类或[...]集合需要出现多少次。本文以现代 JavaScript 教程en.javascript.info正则专题为基础系统讲解{n}、{n,m}、、?、*五种量词的语义差异并通过电话号码提取、小数匹配、HTML 标签解析等实战案例配合仓库内置练习1-find-text-manydots、2-find-html-colors-6hex加深理解。读完本文你将能独立设计出既精确又高效的重复匹配模式并理解何时该用哪种量词。为什么需要量词从单个数字到完整数字假设我们有字符串7(903)-123-45-67希望提取其中所有的完整数字7, 903, 123, 45, 67。如果只用单个字符类\d匹配任意一个数字配合g标志会得到 11 个单独的数字而不是 5 个完整数字。原因在于一个数字本质上是由 1 个或多个数字字符组成的连续序列。要表达1 个或多个就需要在\d后面附加一个量词let str 7(903)-123-45-67; let numbers str.match(/\d{1,}/g); alert(numbers); // 7,903,123,45,67量词的作用对象不限于单个字符它可以附加在字符、字符类如\d或字符集合如[a-z]之后统一指定需要出现多少次。这正是本专题 09-regexp-quantifiers/article.md 的核心主题。精确计数{n}、{n,m}与{n,}最简单的量词是写在花括号里的数字{n}它给出三种形式。精确次数{5}恰好出现 N 次\d{5}表示恰好 5 个数字与手写\d\d\d\d\d完全等价。下面的例子查找一个 5 位数字alert( Im 12345 years old.match(/\d{5}/) ); // 12345如果不想匹配更长数字比如 6 位、7 位可以加上单词边界\b排除更长数字\b\d{5}\b。关于\b的完整语义可参考专题 06-regexp-boundary。次数范围{3,5}匹配 3 到 5 次把上下限都写进花括号即可匹配 35 位数字alert( Im not 12, but 1234 years old.match(/\d{3,5}/) ); // 1234注意Im not 12...中的12只有 2 位不满足 35 的范围因此被跳过1234恰好 4 位命中。无上限{3,}至少 3 次可以省略上限\d{3,}表示长度 3 或更长的数字序列alert( Im not 12, but 345678 years old.match(/\d{3,}/) ); // 345678回到电话号码的例子一个数字是一行中 1 个或多个数字组成的序列所以正则就是\d{1,}let str 7(903)-123-45-67; let numbers str.match(/\d{1,}/g); alert(numbers); // 7,903,123,45,67三种形式的语义速查写法含义等价手写典型用途{5}恰好 5 次\d\d\d\d\d邮编、定长编号{3,5}3 到 5 次—长度受限的 ID{3,}至少 3 次无上限—固定前缀的长序列三个简写量词、?、*最常用的三种量词有专门的简写符号理解它们的边界差异是写出正确正则的关键。一个或多个等价于{1,}let str 7(903)-123-45-67; alert( str.match(/\d/g) ); // 7,903,123,45,67\d与前面的\d{1,}效果完全一致是提取完整数字最常用的写法。?零个或一个等价于{0,1}?让前面的符号变成可选。例如ou?r表示o后面跟零个或一个u再跟r。于是colou?r能同时匹配英式colour和美式colorlet str Should I write color or colour?; alert( str.match(/colou?r/g) ); // color, colour*零个或多个等价于{0,}*表示可以重复任意次数也可以完全不出现。例如\d0*匹配一个数字后跟任意数量的 0alert( 100 10 1.match(/\d0*/g) ); // 100, 10, 1与对比会更直观——\d0要求至少一个 0因此末尾没有 0 的1不会被匹配alert( 100 10 1.match(/\d0/g) ); // 100, 10 // 1 not matched, as 0 requires at least one zero三种简写一览简写含义等价形式记忆口诀一个或多个{1,}至少一个?零个或一个{0,1}可有可无*零个或多个{0,}随便多少个实战一匹配十进制小数\d\.\d量词是复杂正则的主要积木下面通过真实场景展示组合用法。一个带小数点的数字浮点数可以描述为整数部分 小数点 小数部分各部分都是数字序列因此正则写作\d\.\d。注意小数点.是特殊字符必须用\.转义alert( 0 1 12.345 7890.match(/\d\.\d/g) ); // 12.345结果中0、1、7890因为缺少小数点和小数部分而被正确排除。实战二匹配无属性的开始 HTML 标签第一版/[a-z]/ibody这类标签 一个或多个拉丁字母 alert( body ... /body.match(/[a-z]/gi) ); // body改进版/[a-z][a-z0-9]*/iHTML 规范允许标签名在非首位出现数字例如h1。第一版[a-z]无法匹配h1因为h1以字母开头但1是数字。改进方案首位必须是字母[a-z]后续位置可以是字母或数字[a-z0-9]*alert( h1Hi!/h1.match(/[a-z][a-z0-9]*/gi) ); // h1注意这里*的妙用[a-z0-9]*允许零个或多个使模式同时覆盖单字母标签p和带数字的标签h1。实战三匹配开始或结束 HTML 标签\/?在上一个模式开头加上可选斜杠/?就能同时匹配开始标签h1和结束标签/h1alert( h1Hi!/h1.match(/\/?[a-z][a-z0-9]*/gi) ); // h1, /h1关键细节斜杠/是正则字面量的定界符必须用反斜杠转义成\/否则 JavaScript 会误以为它是模式结束符。仓库练习印证省略号与 HTML 颜色本专题目录下内置了两个配套练习正好覆盖{3,}与{6}的典型用法可作为量词实战的验收题。练习一匹配省略号3 个及以上连续点任务见 1-find-text-manydots/task.md找出 3 个或更多连续的点号。解答见 1-find-text-manydots/solution.mdlet regexp /\.{3,}/g; alert( Hello!... How goes?......match(regexp) ); // ..., .....两个要点.是通配符特殊字符必须先转义为\.才能匹配字面量点号使用无上限形式{3,}而非{3}才能把 5 个连续点的.....也完整匹配出来若用{3}.....会被截成两个 3 点片段。练习二匹配 6 位十六进制 HTML 颜色任务见 2-find-html-colors-6hex/task.md匹配#ABCDEF形式的颜色——先#后接 6 个十六进制字符。解答见 2-find-html-colors-6hex/solution.mdlet regexp /#[a-f0-9]{6}/gi; let str color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2; alert( str.match(regexp) ); // #121212,#AA00ef十六进制字符集用[0-9a-fA-F]描述若使用i标志忽略大小写则可简写为[0-9a-f]。随后用精确量词{6}锁定恰好 6 位。边界修正/#[a-f0-9]{6}/gi会把 8 位字符串#12345678中的前 6 位#123456误判为颜色。解法是在末尾追加单词边界\balert( #123456.match( /#[a-f0-9]{6}\b/gi ) ); // #123456 alert( #12345678.match( /#[a-f0-9]{6}\b/gi ) ); // null这个例子再次印证量词控制重复数量而\b之类的锚点控制匹配边界两者配合才能得到精确结果。精确与复杂度的权衡从上面的 HTML 标签例子可以提炼出一条通用规律正则越精确通常就越长越复杂。简单写法\w能匹配任意单词字符字母、数字、下划线构成的标签名但也会误匹配1a这类 HTML 不允许的名字严谨写法[a-z][a-z0-9]*严格遵循 HTML 标签命名规范首位必须字母更可靠。实际项目中两种写法都可以接受选择取决于你对多余匹配的容忍度有多高以及能否通过其他手段如后续过滤轻松剔除误报。这是正则设计中最常见的权衡取舍也是 09-regexp-quantifiers/article.md 特别强调的经验法则。延伸阅读量词的贪心行为掌握了量词的数量语义后还须了解它的匹配行为。默认情况下所有量词都是**贪婪greedy**的引擎会尽可能多地匹配字符直到无法继续为止。例如.在a witch and her broom is one中会一口气匹配到最后一个引号得到witch and her broom而非两个独立引号片段。这种贪心行为及其解决方案懒惰量词?、*?、??详见下一篇专题 10-regexp-greedy-and-lazy。此外本专题在正则系列中的位置位于字符类02-regexp-character-classes、锚点与边界04-regexp-anchors、06-regexp-boundary之后建议按顺序阅读以建立完整的正则知识链。通过 9-regular-expressions 的目录索引可以浏览全部正则专题。小结精确量词{n}、{n,m}、{n,}分别对应恰好 n 次n 到 m 次至少 n 次简写一个或多个、?零个或一个、*零个或多个覆盖了绝大多数日常需求量词可以叠加在字符类\d、[a-z]上组合出完整模式如小数\d\.\d、HTML 标签\/?[a-z][a-z0-9]*转义\.、\/与边界锚点\b是量词之外必备的精确化工具越精确的正则越复杂实际选择取决于对误报的容忍度默认量词是贪婪的行为细节请继续学习贪心与懒惰量词专题。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐Modern JavaScript Tutorial用正则精确匹配 HTML 标签——贪婪、懒惰量词与 [^] 排除法实战Modern JavaScript Tutorial用正则精确匹配 HTML 标签——贪婪、懒惰量词与 ^ 排除法实战 本篇基于 Modern JavaSc文档/教程前端JavaScript 正则交替实战用 style(|\s.*?) 精确匹配完整 HTML 标签JavaScript 正则交替实战用 style |\s. ? 精确匹配完整 HTML 标签 正则表达式中的交替Alternation用 | 表示文档/教程前端JavaScript 正则 Sticky 标志 y精确位置匹配与 lastIndex 深入指南JavaScript 正则 Sticky 标志 y 精确位置匹配与 lastIndex 深入指南 Sticky 标志 y pattern:y 让正则表达文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考