ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

JavaScript 正则表达式锚点:深入理解字符串起始 `^` 与结束 `$`

JavaScript 正则表达式锚点:深入理解字符串起始 `^` 与结束 `$` 文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文讲解 JavaScript 正则表达式中两个最基础也最常用的锚点Anchors代表字符串起始位置的插入符^以及代表字符串结束位置的美元符$。你将学会用它们判断文本是否以指定内容开头/结尾、验证整个字符串是否完全符合某种格式如12:34时间格式并理解锚点零宽度zero width的本质——它们不消费字符只做位置断言。结合本教程仓库中的配套练习与相邻章节源码本文还会带你厘清锚点与字符串方法startsWith/endsWith的适用边界以及为多行模式m标志埋下伏笔。锚点是什么^匹配文本开头$匹配文本结尾在正则表达式regexp中插入符pattern:^和美元符pattern:$具有特殊含义它们被称为锚点插入符pattern:^匹配文本的起始位置美元符pattern:$匹配文本的结束位置。例如测试文本是否以Mary开头let str1 Mary had a little lamb; alert( /^Mary/.test(str1) ); // true模式pattern:^Mary的含义是字符串起始紧接着是 Mary。正则引擎会先检查当前位置是否为字符串开头如果是再尝试依次匹配Mary这几个字符。与之类似可以用pattern:snow$测试字符串是否以snow结尾let str1 its fleece was white as snow; alert( /snow$/.test(str1) ); // true需要指出的是像上面这种检查开头/结尾是否包含某个固定子串的简单场景完全可以改用字符串方法startsWith/endsWith实现。正则表达式的优势在于更复杂的测试——例如下文的整体格式校验这正是指南 正则表达式总览 中强调的正则表达式是强大的搜索与替换工具的典型应用场景。完整匹配测试^...$校验字符串整体格式把两个锚点组合成pattern:^...$是最常用的用法之一测试整个字符串是否完全符合某个模式。典型场景是校验用户输入是否符合预期格式。比如检查一个字符串是否是12:34格式的时间——即两个数字、一个冒号、再两个数字。用正则语言表达就是pattern:\d\d:\d\d其中pattern:\d代表任意单个数字见 字符类let goodInput 12:34; let badInput 12:345; let regexp /^\d\d:\d\d$/; alert( regexp.test(goodInput) ); // true alert( regexp.test(badInput) ); // false这里pattern:\d\d:\d\d的匹配必须恰好从文本起始位置pattern:^之后开始而文本结束位置pattern:$必须紧跟在匹配结果之后。因此整个字符串必须完全是这种格式只要有任何偏差或多余字符结果就是false——例如12:345在第二对数字后多了一个5无法通过pattern:$断言所以返回false。这种全匹配校验在实际开发中非常常见验证手机号、邮箱、日期、IP 地址、邮政编码等输入格式时pattern:^...$是最基础的骨架配合字符类、量词、分组等进一步细化规则。锚点是零宽度断言不消费任何字符锚点有一个非常重要的特性——零宽度zero width锚点pattern:^和pattern:$是测试它们具有零宽度。换句话说它们不匹配任何字符而是强制正则引擎检查当前位置是否满足条件文本起始 / 文本结束。这意味着锚点不会出现在匹配结果中。正则引擎在遇到pattern:^时只是检查当前位置是不是文本开头遇到pattern:$时只是检查当前位置是不是文本结尾。这与pattern:\d、pattern:\w等字符类会真正消费并匹配一个字符有本质区别。这个特性可以用配套练习 Regexp ^$ 直观验证哪个字符串能匹配模式pattern:^$答案见 solution.md空字符串是唯一匹配。因为空字符串的开头就是结尾——正则引擎先匹配pattern:^输入起始位置存在随后立刻匹配pattern:$输入结尾位置也存在于是产生一个匹配。/^$/.test(); // true —— 空字符串 /^$/.test(a); // false —— 中间还有一个字符这个练习再次印证锚点不是字符而是位置测试。pattern:^$匹配的是起始位置紧挨结束位置也就是长度为 0 的位置区间因此只有空字符串满足。锚点与startsWith/endsWith的取舍指南中明确指出在这些特定场景下我们可以改用字符串方法startsWith/endsWith。正则表达式应该用于更复杂的测试。两种手段的取舍规则可以总结为场景推荐手段仅判断字符串是否以固定子串开头/结尾str.startsWith(sub)/str.endsWith(sub)开头/结尾需要满足动态规则如必须是数字、必须匹配某类字符锚点正则如/^\d/、/snow$/需要校验整体格式^...$全匹配锚点正则字符串方法更简洁直观、可读性好而正则锚点胜在条件化——pattern:^后面可以接任意复杂的模式不受固定子串限制。延伸m标志下锚点行为的改变指南在结尾提示了一个重要伏笔如果存在pattern:m标志锚点的行为会不同。我们将在下一篇文章中看到。这个下一篇文章即仓库中的 多行模式下的锚点 ^ $标志 m。简单预告开启pattern:m后pattern:^和pattern:$不仅在整段文本的开头/结尾匹配还会在每一行的开头/结尾匹配。例如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标志对这两个锚点的位置断言范围的影响读者可按 9-regular-expressions 的章节顺序循序渐进。与锚点同类的其他零宽度断言理解了锚点的测试而非字符本质后可以顺带认识正则中其他同类断言它们共同构成了零宽度测试家族词边界pattern:\b检查当前位置是否为单词边界详见 词边界 \b。例如/\bJava\b/能匹配Hello, Java!中的独立单词Java却匹配不了Hello, JavaScript!。前瞻 / 后顾断言lookahead / lookbehind详见 前瞻与后顾。它们都不消费字符只基于当前位置两侧的文本内容做出判断从而让正则表达式的匹配位置控制更加精确。配套练习与检测方法速览本小节对应的配套练习位于 1-start-end/task.md答案在 1-start-end/solution.md。练习核心是理解pattern:^$只匹配空字符串再一次强调锚点的测试本质。在运行文中示例时需要掌握与之配套的检测方法详见 RegExp 与 String 的方法regexp.test(str)返回布尔值判断是否存在至少一个匹配是锚点校验场景最常用的方法str.match(regexp)返回匹配结果数组带pattern:g标志时返回全部匹配无匹配时返回null注意不是空数组str.replace(regexp, replacement)用替换串或函数替换匹配内容。例如用test校验输入function isTimeFormat(input) { return /^\d\d:\d\d$/.test(input); } isTimeFormat(12:34); // true isTimeFormat(1234); // false —— 缺少冒号 isTimeFormat(12:345); // false —— 结尾多了一个字符小结pattern:^匹配文本起始位置pattern:$匹配文本结束位置组合成pattern:^...$可校验整个字符串是否完全匹配某种格式如12:34时间格式简单的前缀/后缀判断可用startsWith/endsWith替代复杂校验则交给正则锚点锚点是零宽度测试不消费字符pattern:^$因此只能匹配空字符串开启pattern:m标志后锚点会在每行的开头/结尾匹配详见多行模式章节与pattern:\b、前瞻/后顾断言一样锚点属于位置断言家族理解这一点是掌握正则引擎匹配机制的关键。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript正则表达式教程锚点^和$的深入理解JavaScript正则表达式教程锚点^和$的深入理解 在JavaScript正则表达式中 ^ 和 $ 是两个非常重要的特殊字符它们被称为锚点 anc30 Seconds of Code用 JavaScript 正则表达式规范化字符串行结束符Line Endings30 Seconds of Code用 JavaScript 正则表达式规范化字符串行结束符Line Endings 导读 在跨平台开发的日常中文本文件教程文档JavaScript正则表达式教程锚点(^和$)详解JavaScript正则表达式教程锚点 ^和$ 详解 什么是正则表达式锚点 在正则表达式中 ^ 和 $ 是两个特殊的元字符它们被称为锚点 anchor上一篇PaddleOCR 分布式训练实战基于 PaddlePaddle Fleet 的单机多卡与多机多卡加速指南下一篇PixiJS v8 性能优化实战指南从 FPS 剖析到渲染、内存与 GPU 资源的系统化调优创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表