ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Modern JavaScript Tutorial 正则表达式系列:锚点 `^` `$` 的多行模式与 `m` 标志详解

Modern JavaScript Tutorial 正则表达式系列:锚点 `^` `$` 的多行模式与 `m` 标志详解 文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读在处理多行文本如日志、配置文件、Markdown 正文时正则表达式的行首、行尾匹配是最常见也最容易出错的需求。本篇文章聚焦 Modern JavaScript Tutorial 中「正则表达式多行模式Multiline mode」这一章节系统讲解m标志如何改变锚点^与$的匹配行为默认情况下它们只匹配整个字符串的开头与结尾而开启多行模式后则会匹配每一行的开头与结尾。读完本文你将彻底理解^、$与换行符\n的本质区别并能用它们准确提取多行文本中每行的关键内容。一、什么是多行模式标志mJavaScript 的正则表达式支持 6 个标志flags分别是i忽略大小写、g全局匹配、m多行模式、sdotall让.匹配换行符、u完整 Unicode 支持、ysticky 粘性匹配详见 正则表达式入门章节。其中标志mmultiline的职责非常单一多行模式只影响锚点^与$的行为。在默认非多行模式下^只在整个字符串的开头匹配$只在整个字符串的结尾匹配而在多行模式下它们不仅匹配文本整体首尾还会在每一行的开头 / 结尾处匹配。关于^与$在默认模式下的基础行为可以回看本系列前一篇 锚点字符串开头 ^ 与结尾 $其中强调了一个关键性质锚点不是字符而是零宽度zero width的测试——它们不消费任何字符只是让正则引擎在当前位置检查是否处于文本开头/结尾这一条件。理解这一点对理解多行模式至关重要。二、行首匹配^在多行模式下2.1 开启m后每行开头都能命中假设我们有一段三行文本记录了三名选手的名次let str 1st place: Winnie 2nd place: Piglet 3rd place: Eeyore; console.log( str.match(/^\d/gm) ); // 1, 2, 3模式pattern:/^\d/gm由三部分组成^要求当前位置是行首\d要求紧接着是一个数字g表示查找全部匹配m开启多行模式。最终结果得到1, 2, 3——三行的第一个数字都被捕获了。2.2 关闭m后只有整个文本开头的数字能命中同样的文本、同样的^与\d只是去掉m标志let str 1st place: Winnie 2nd place: Piglet 3rd place: Eeyore; console.log( str.match(/^\d/g) ); // 1结果只剩一个1。原因正如文档所强调的默认情况下^只在文本开头匹配而文本开头只有一个所以只取到第一个数字。2.3 行首的精确定义这里有一个容易忽略的细节文档用专门的提示框给出正式定义行首start of a line正式含义是紧跟换行符之后多行模式下^测试会在所有前面紧邻换行符\n的位置匹配当然也包括文本的最开头。换句话说^在m模式下匹配的位置集合是{文本开头} ∪ {每个 \n 之后的紧邻位置}。这个定义决定了多行模式下行的边界就是\n。三、行尾匹配$在多行模式下$的行为与^完全对称。3.1 开启m后每行结尾的数字都能命中把上一节的例子改造成查找每一行最后一个数字let str Winnie: 1 Piglet: 2 Eeyore: 3; console.log( str.match(/\d$/gm) ); // 1,2,3模式pattern:\d$要求一个数字紧邻行尾配合g与m得到三行各自的末尾数字1, 2, 3。3.2 关闭m后只有整个文本的最后一个数字命中如果去掉mlet str Winnie: 1 Piglet: 2 Eeyore: 3; console.log( str.match(/\d$/g) ); // 3由于$默认只匹配整个文本的结尾而整个文本以3收尾所以只找到最后一个数字。3.3 行尾的精确定义与行首对应文档同样给出正式定义行尾end of a line正式含义是紧邻换行符之前多行模式下$测试会在所有后面紧邻换行符\n的位置匹配当然也包括文本的最末尾。也就是说$在m模式下匹配的位置集合是{文本末尾} ∪ {每个 \n 之前的紧邻位置}。注意3之后没有换行符但它处于文本末尾因此依然满足$的匹配条件。四、用\n代替^ $行吗区别在哪里既然多行模式让^、$可以定位行首行尾那为什么不直接匹配换行符\n呢文档专门用一个小节回答了这个问题。4.1 用\n匹配的后果把上一节的pattern:\d$改成pattern:\d\nlet str Winnie: 1 Piglet: 2 Eeyore: 3; console.log( str.match(/\d\n/g) ); // 1\n,2\n结果从 3 个匹配变成了 2 个。原因有两点最后一行没有换行符Eeyore: 3之后是文本末尾而不是\n所以3\n无法匹配。而$锚点可以匹配文本末尾因此3在\d$带m中能命中。\n是字符会进入匹配结果\n是实实在在的字符因此每次匹配结果中都包含换行符本身输出为1\n,2\n。而^、$是零宽度的测试它们只检查位置条件不会把任何字符带入匹配结果。4.2 选择依据文档给出了非常清晰的取舍结论可以直接当作决策准则当你需要把换行符本身作为结果的一部分例如按行切分后要保留行结束符时用\n当你只是需要找到位于某行开头或结尾的内容换行符不应该出现在匹配结果里时用带m标志的锚点^/$。用一句话概括锚点管位置\n管字符。锚点只做条件测试、零宽度、不消费字符而\n是一个真实的字符参与匹配并出现在结果中。这与前一篇 锚点章节 强调的锚点零宽度特性一脉相承。五、实战延伸多行模式与锚点的典型配合在 Modern JavaScript Tutorial 的正则表达式系列中多行模式常与其他锚点类特性配合使用这里给出几个基于仓库既有内容的实战视角。5.1 多行模式 全字符串校验的边界在 锚点章节的练习题 中^...$组合被用来校验整个字符串是否完全符合某种格式例如时间12:34。练习的解答特意强调^与$是测试而非字符即使对空字符串^与$也能同时命中。这与多行模式直接相关一旦加上m^...$就退化为逐行校验此时每一行都会被独立要求满足完整格式——这是实现逐行格式校验的高效手段。5.2 多行模式 单词边界\b另一类与行首行尾高度相关的锚点是单词边界\b详见 单词边界章节。\b同样是零宽度测试它检查位置两侧是否一边是单词字符\w、一边不是。实际处理多行文本时常把^、$与\b组合^\b\d\b$带m可以精确匹配整行恰好是一个独立的数字。这类模式在日志解析、配置文件校验、命令行输出处理中非常实用。5.3 提取结果的注意事项match与g标志本文所有示例都依赖str.match(regexp)配合g标志返回全部匹配数组若没有gmatch只返回第一个匹配若没有任何匹配match返回null而非空数组。完整的match/matchAll/replace/exec行为可查阅本系列 正则方法与字符串方法那里还覆盖了lastIndex与全局正则复用的陷阱——这些细节在真实项目中排查为什么只匹配到第一行时尤为重要。六、小结场景模式匹配结果每行开头的数字/^\d/gm每行第一个数字如1, 2, 3每行结尾的数字/\d$/gm每行最后一个数字如1,2,3数字 换行符本身/\d\n/g仅非末行命中且结果含\n整个文本开头的数字/^\d/g仅第一个数字整个文本结尾的数字/\d$/g仅最后一个数字核心要点回顾标志m只改变^与$对.、\d、\b等其他语法没有影响多行模式下^匹配文本开头 每个\n之后$匹配文本末尾 每个\n之前锚点是零宽度测试不消费字符、不进入匹配结果只检查位置条件\n是真实字符需要换行符进入结果时用它需要定位行首行尾时用锚点。以上内容整理自 9-regular-expressions/05-regexp-multiline-mode/article.md并结合同系列 锚点章节、正则表达式入门章节 与 正则方法章节 进行了扩展讲解。建议在阅读本系列时按入门 → 锚点 → 多行模式 → 单词边界 → 正则方法的顺序循序渐进掌握正则表达式的完整能力。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript正则表达式教程多行模式(m标志)详解JavaScript正则表达式教程多行模式 m标志 详解 多行模式简介 在JavaScript正则表达式中 m 标志用于启用多行模式 multiline mTidal-HiFi API全解析构建属于你的音乐控制应用Tidal HiFi API全解析构建属于你的音乐控制应用 Tidal HiFi是一款基于Electron构建的音乐播放应用它将Tidal的网页版体验与WiJavaScript正则表达式中的锚点^和$详解JavaScript正则表达式中的锚点^和$详解 正则表达式是JavaScript中处理字符串的强大工具而锚点 anchors 则是正则表达式中非常重要的概文档/教程前端上一篇Quagga 路由协议栈快速上手:从零搭建 BGP 与 OSPF 实验环境下一篇fanbox-dl一条命令批量备份 FANBOX 创作者内容的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表