
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载^脱字符与$美元符是 JavaScript 正则表达式中最基础也最容易产生误解的两个“锚点”。本文以 Modern JavaScript Tutorial 仓库中 正则表达式任务 Regexp ^$ 及其 官方解答 为主线从“空字符串是唯一匹配”这个反直觉结论出发彻底讲清锚点的“零宽”本质、完整匹配校验的实战写法以及多行模式m带来的行为差异帮助你在表单校验、输入格式检查等场景中准确使用锚点。任务回顾/^$/能匹配哪些字符串任务原文 提出的问题非常简短哪个字符串能匹配正则^$let regexp /^$/;直觉上很多人会认为^匹配“开头”$匹配“结尾”那么中间应该“有点什么”才行。但正确答案出乎意料只有空字符串能匹配/^$/。对应的官方解答是这样解释的空字符串是唯一的匹配它一开始就立即结束。 这个任务再次证明锚点不是字符而是“测试”tests。也就是说对于空字符串正则引擎先测试^输入是否位于文本开头——满足紧接着测试$是否位于文本结尾——同样满足。因此产生了匹配。核心原理锚点是零宽的“测试”不是字符要理解上述结论必须先建立正确的锚点心智模型。《Anchors: string start ^ and end $》 一文明确指出脱字符^匹配文本的开头美元符$匹配文本的结尾它们被称为anchors锚点。更重要的是该文以 smart 提示块强调的**“零宽”特性**锚点^和$是测试它们具有零宽度zero width。换句话说它们不消费任何字符而是强制正则引擎去检查条件文本开头/结尾。这正是“零宽断言”zero-width assertion的含义锚点不会占用匹配结果中的任何字符匹配结果的长度完全取决于模式中其他部分。对于/^$/模式里除了两个锚点之外没有任何字符类或字面量所以唯一能满足“开头即结尾”条件的输入就是长度为零的空字符串。引擎逐步匹配演示以regexp /^$/、str 为例引擎执行过程如下引擎位于位置 0测试^当前是否在文本开头——是通过引擎继续测试$当前是否在文本结尾——由于字符串长度为 0位置 0 同时就是结尾——是通过两个测试全部通过返回匹配匹配结果为空字符串。而对于任何非空字符串如a步骤 2 必然失败位置 0 之后还有字符不满足“位于结尾”于是^$匹配失败。这就是“空字符串是唯一匹配”的根本原因。实践价值用^...$做“完整匹配”校验单个锚点常用于检测“以什么开头/以什么结尾”两个锚点组合^...$则常用于验证整个字符串是否完全符合某种格式——例如检查用户输入是否为12:34这样的时间格式两个数字、一个冒号、再两个数字。教程原文 给出的例子let goodInput 12:34; let badInput 12:345; let regexp /^\d\d:\d\d$/; alert(regexp.test(goodInput)); // true alert(regexp.test(badInput)); // false关键点在于^\d\d:\d\d$要求匹配必须恰好从文本开头之后开始且文本结尾必须紧跟匹配结束因此整个字符串必须精确符合格式。只要有多余字符或任何偏差如12:345多了一位数字结果为false若不使用^...$/\d\d:\d\d/会在12:345中成功匹配子串12:34从而给出错误的true——这正是“完整匹配校验”必须同时使用两个锚点的原因。表单校验的典型场景这种写法直接对应真实开发中的输入校验需求例如// 校验 24 小时制时间 HH:MM function isValidTime(input) { return /^\d\d:\d\d$/.test(input); } // 校验 8 位纯数字密码简化示例 function is8Digits(input) { return /^\d{8}$/.test(input); }只要输入中混入空格、字母或多余字符^...$组合都会让校验返回false保证“不多不少、完全匹配”。边界情况与替代方案教程还提醒了一个重要的工程判断对于“以 X 开头/以 X 结尾”这类简单检测优先使用字符串方法startsWith/endsWith正则表达式应当留给更复杂的测试let str Mary had a little lamb; alert(/^Mary/.test(str)); // true正则写法 alert(str.startsWith(Mary)); // true更直观的字符串方法 let str2 its fleece was white as snow; alert(/snow$/.test(str2)); // true正则写法 alert(str2.endsWith(snow)); // true字符串方法而“完整格式校验”full match则没有对应的高可读性字符串方法此时^...$正是标准解。进阶m多行模式下锚点的行为变化锚点还有一个必须掌握的变体行为当正则带有多行标志m时^与$不再只匹配整个文本的开头/结尾还会匹配每一行的行首/行尾。后续章节《Multiline mode of anchors ^ $, flag m》 对此有详细说明。对比示例文本含多行let str 1st place: Winnie 2nd place: Piglet 3rd place: Eeyore; console.log(str.match(/^\d/gm)); // [1, 2, 3]每行行首各取一个数字 console.log(str.match(/^\d/g)); // [1]默认模式只匹配整个文本开头默认不带m时^仅在文本开头匹配带m时^在每个换行符\n之后的位置以及文本开头匹配$则类似地在每个换行符之前的位置以及文本结尾匹配。因此如果某个^...$校验写成了re /^\d\d:\d\d$/m而输入是多行文本每一行都会单独参与“完整匹配”测试——这是多行校验场景下容易踩到的坑。另外注意若想在结果中包含换行符本身应使用\n字符而非锚点因为锚点是零宽测试、不进入匹配结果而\n是真实字符、会作为匹配内容的一部分被捕获如str.match(/\d\n/g)返回[1\n, 2\n]。小结回到开篇的任务/^$/的答案是唯一的空字符串。它的底层逻辑可以浓缩为三句话锚点^、$是零宽度的测试不消费字符空字符串同时满足“位于开头”与“位于结尾”因此是/^$/的唯一匹配在实战中^...$组合是“整个字符串精确匹配某格式”的标准写法配合test()即可完成可靠的表单输入校验。想进一步巩固可以对照阅读仓库中的 任务描述、官方解答 与 锚点章节正文并继续学习多行模式m以掌握锚点的完整行为。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐暗黑2存档编辑器终极指南轻松修改角色与装备的完整教程暗黑2存档编辑器终极指南轻松修改角色与装备的完整教程 你是否曾在暗黑破坏神2单机模式中为了一件稀有装备反复刷怪数小时是否因为属性点分配失误而不得不重新练号文档/教程前端正则表达式终极指南掌握剑指Offer面试题19的字符串模式匹配实战技巧正则表达式终极指南掌握剑指Offer面试题19的字符串模式匹配实战技巧 正则表达式是编程面试中的高频考点也是字符串处理的核心技术。在《剑指Offer名企面教程正则表达式实战Swift中的字符串模式匹配与验证正则表达式实战Swift中的字符串模式匹配与验证 引言 在日常开发中我们经常需要处理各种文本数据的验证和提取工作。无论是验证用户输入的邮箱格式、检查电话号码示例工程上一篇wxapkg-convertor技术深度解析微信小程序二进制包逆向工程实践下一篇3步让老打印机变身AirPrint神器Docker容器化解决方案揭秘创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考