尧图网页设计 
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载正则表达式Regular Expression简称 regexp 或 regex是 JavaScript 中用于文本搜索与替换的强有力工具。本篇指南以 Modern JavaScript Tutorialen.javascript.info仓库中 9-regular-expressions/01-regexp-introduction/article.md 为骨架系统讲解正则表达式的两种创建语法、全部 6 个标志flags、以及str.match、str.replace、regexp.test三个最核心的匹配方法。读完本文你将能够独立写出带标志的正则表达式安全地处理无匹配返回 null的陷阱并掌握替换字符串中的特殊符号用法。什么是正则表达式正则表达式是由一个*模式pattern和若干可选的标志flags*组成的文本匹配描述。在 JavaScript 中它通过内置的RegExp对象提供同时深度集成在字符串的各种方法中str.match、str.replace、str.search、str.split等。一个正则表达式的核心职责是回答两个问题在给定文本中模式能否匹配如果能匹配匹配到哪些内容、出现在什么位置后续章节如 9-regular-expressions/02-regexp-character-classes/article.md 中的字符类、11-regexp-groups 中的捕获组等会逐步丰富模式本身的表达能力而本篇聚焦于正则表达式的整体形态——如何创建它、如何用标志控制它的行为、如何用三种最常用的方法执行搜索。创建正则表达式的两种语法JavaScript 提供了两种创建正则表达式对象的方式最终得到的都是内置RegExp类的实例。长语法new RegExp(pattern, flags)let regexp new RegExp(pattern, flags);模式与标志都以字符串形式传入。这种语法适合在运行时动态拼接模式因为模式来自字符串可以使用模板字符串、变量插值等动态手段。短语法斜杠字面量/pattern/flagslet regexp /pattern/; // 无标志 let regexp /pattern/gmi; // 带标志 g、m、i含义见下文斜杠/.../告诉 JavaScript 这里正在创建一个正则表达式其作用与字符串的引号相同——界定内容的边界。两种语法的核心区别斜杠字面量/.../是完全静态的模式内部不允许插入表达式不能像字符串模板字面量那样使用${...}进行插值。因此它适用于在编写代码时就已经确定模式的场景——这也是最常见的场景。new RegExp更常用于按需动态生成当模式需要从动态生成的字符串中构造时使用。例如根据用户输入构造标签匹配表达式let tag prompt(What tag do you want to find?, h2); let regexp new RegExp(${tag}); // 若上一步回答 h2则等价于 /h2/需要注意的是由于new RegExp接收的是字符串模式中的反斜杠需要按字符串转义规则书写例如要匹配\d需写成new RegExp(\\d)这是动态创建时最常见的易错点。六个标志Flags详解标志flags会直接影响搜索行为。JavaScript 中一共只有 6 个标志可以任意组合顺序无关紧要标志名称/含义行为说明iignoreCase忽略大小写搜索不区分大小写A与a视为相同gglobal全局查找所有匹配不带它时只返回第一个匹配mmultiline多行模式使^、$锚点匹配每行的开头/结尾详见 05-regexp-multiline-modesdotall点号匹配所有使点号.也能匹配换行符\n详见 02-regexp-character-classesuunicode完整 Unicode 支持正确代理对surrogate pair处理并启用\p{...}属性查找详见 03-regexp-unicodeysticky粘性模式仅在文本中的精确位置开始搜索详见 16-regexp-sticky几点值得强调g是最常用的标志没有它str.match、str.replace等只处理第一个匹配带上它才处理全部匹配。在多行文本校验、全局替换等场景下几乎必用。u标志对现代应用越来越重要默认情况下正则表达式会把 4 字节的长字符如、这类代理对当作两个 2 字节字符处理导致匹配结果怪异加上u后按字符正确处理并解锁\p{Letter}、\p{Number}等 Unicode 属性类例如str.match(/\p{L}/gu)可跨语言匹配字母。y与g都依赖regexp.lastIndex属性定位但g允许从lastIndex起向后任意搜索y则严格要求匹配必须恰好始于lastIndex位置这在词法分析等定点读取任务中非常有用。提示本系列文档后续统一使用颜色约定正则表达式为红色pattern:、被搜索的字符串为蓝色subject:、匹配结果为绿色match:。搜索str.match(regexp)方法str.match(regexp)在字符串str中查找regexp的所有匹配它有 3 种工作模式这是理解返回值的关键。模式一带g标志——返回全部匹配的数组let str We will, we will rock you; alert( str.match(/we/gi) ); // We,we包含 2 个子串的数组注意这里We和we都被找到正是因为i标志使正则表达式不区分大小写。模式二不带g标志——返回第一个匹配及细节此时返回一个数组完整匹配位于索引0数组还携带额外的属性let str We will, we will rock you; let result str.match(/we/i); // 不带 g 标志 alert( result[0] ); // We第 1 个匹配 alert( result.length ); // 1 // 附加细节 alert( result.index ); // 0匹配的位置 alert( result.input ); // We will, we will rock you原始字符串如果模式中包含括号捕获组数组还会有0之外的索引第 1 组在1、第 2 组在2……这部分在 11-regexp-groups 中详细展开。完整的返回结构含index、input、捕获组在 17-regexp-methods 中也有系统介绍。模式三无匹配——返回null最重要的陷阱无论是否带g标志只要没有匹配str.match返回的都是null而非空数组。忘记这一点很容易引发运行时错误let matches JavaScript.match(/HTML/); // null if (!matches.length) { // Error: Cannot read property length of null alert(Error in the line above); }如果你希望结果永远是数组可以用|| []兜底let matches JavaScript.match(/HTML/) || []; if (!matches.length) { alert(No matches); // 现在可以正常工作 }替换str.replace(regexp, replacement)方法str.replace(regexp, replacement)用replacement替换str中regexp找到的匹配带g标志替换所有匹配否则只替换第一个。// 不带 g只替换第一处 alert( We will, we will.replace(/we/i, I) ); // I will, we will // 带 g替换全部 alert( We will, we will.replace(/we/ig, I) ); // I will, I will替换字符串中的特殊符号第二个参数replacement是一个替换字符串其中可以嵌入特殊符号组合来插入匹配的片段符号在替换字符串中的作用$插入完整匹配$插入匹配之前的那部分字符串$插入匹配之后的那部分字符串$n若n是 12 位数字插入第 n 个括号捕获组的内容详见 11-regexp-groups$name插入指定name的命名捕获组内容详见 11-regexp-groups$$插入字符$本身使用$的示例alert( I love HTML.replace(/HTML/, $ and JavaScript) ); // I love HTML and JavaScript进阶用函数作为替换逻辑当替换逻辑复杂如大小写转换、根据位置计算时replace的第二个参数还可以是函数它会在每次匹配时被调用并返回替换文本。函数签名按有无捕获组而变化通常为(match, p1, p2, ..., pn, offset, input, groups)详见 17-regexp-methods 中对str.replace的深入讲解。例如把匹配全部转大写let result str.replace(/html|css/gi, str str.toUpperCase());测试regexp.test(str)方法regexp.test(str)用于是否存在至少一个匹配的判断找到返回true否则返回false。它不像match那样返回匹配内容因此非常适合布尔校验场景如表单格式验证let str I love JavaScript; let regexp /LOVE/i; alert( regexp.test(str) ); // truei 标志使大小写不敏感一个值得注意的行为如果正则表达式带g标志test也会像exec一样从regexp.lastIndex属性位置开始搜索并推进该属性。这意味着同一个全局正则反复用于不同字符串可能得到意外结果——在 17-regexp-methods 中有专门警告连续两次对同一文本调用regexp.test第二次可能因lastIndex已非零而返回false。规避方法是每次搜索前手动重置regexp.lastIndex 0或者改用不依赖lastIndex的字符串方法如str.match、str.search。相关方法与后续学习路线str.match、str.replace、regexp.test是正则表达式入门的三驾马车。除此之外JavaScript 还提供str.matchAll返回含捕获组的迭代器、str.split(regexp)按正则分隔字符串、str.search(regexp)返回首个匹配位置、regexp.exec配合lastIndex逐次取匹配等更进阶的方法完整讲解见 17-regexp-methods。在本仓库的正则表达式专题9-regular-expressions中你可以按顺序继续深入字符类\d、\s、\w及反向类02-regexp-character-classesUnicode 标志u与\p{...}属性查找03-regexp-unicode锚点^、$与多行模式m04-regexp-anchors、05-regexp-multiline-mode捕获组与命名组11-regexp-groups粘性标志y与定点搜索16-regexp-sticky小结一个正则表达式由模式和可选标志组成共 6 个标志g、i、m、u、s、y。创建方式有两种斜杠字面量/pattern/flags静态、最常用与new RegExp(pattern, flags)动态生成模式时使用两者都产生RegExp实例。不带标志和特殊符号时正则搜索等同于子串搜索。str.match(regexp)查找匹配带g返回全部匹配的数组不带g返回首匹配数组含index、input细节无匹配返回null可用|| []兜底。str.replace(regexp, replacement)替换匹配带g替换全部否则只替换第一个替换串支持$、$、$、$n、$name、$$等特殊符号也可传函数实现智能替换。regexp.test(str)返回布尔值至少一个匹配为true否则为false带g时注意lastIndex状态带来的副作用。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐终极gcpp分配器指南deferred_allocator与STL容器完美集成终极gcpp分配器指南deferred_allocator与STL容器完美集成 gcppGitHub 加速计划是一个实验性的 C延迟和无序销毁库其核Coding WebIDE为什么你需要一个云端开发环境Coding WebIDE为什么你需要一个云端开发环境 想象一下你可以在任何地方、任何设备上编写代码无需配置复杂的开发环境无需担心软件兼容性问题只需开发工具IDE后端Modern JavaScript Tutorial 正则表达式系列锚点 ^ $ 的多行模式与 m 标志详解Modern JavaScript Tutorial 正则表达式系列锚点 ^ $ 的多行模式与 m 标志详解 导读 在处理多行文本如日志、配置文件、Mark文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Modern JavaScript Tutorial 正则表达式入门：模式（Pattern）与标志（Flags）完全指南
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载正则表达式Regular Expression简称 regexp 或 regex是 JavaScript 中用于文本搜索与替换的强有力工具。本篇指南以 Modern JavaScript Tutorialen.javascript.info仓库中 9-regular-expressions/01-regexp-introduction/article.md 为骨架系统讲解正则表达式的两种创建语法、全部 6 个标志flags、以及str.match、str.replace、regexp.test三个最核心的匹配方法。读完本文你将能够独立写出带标志的正则表达式安全地处理无匹配返回 null的陷阱并掌握替换字符串中的特殊符号用法。什么是正则表达式正则表达式是由一个*模式pattern和若干可选的标志flags*组成的文本匹配描述。在 JavaScript 中它通过内置的RegExp对象提供同时深度集成在字符串的各种方法中str.match、str.replace、str.search、str.split等。一个正则表达式的核心职责是回答两个问题在给定文本中模式能否匹配如果能匹配匹配到哪些内容、出现在什么位置后续章节如 9-regular-expressions/02-regexp-character-classes/article.md 中的字符类、11-regexp-groups 中的捕获组等会逐步丰富模式本身的表达能力而本篇聚焦于正则表达式的整体形态——如何创建它、如何用标志控制它的行为、如何用三种最常用的方法执行搜索。创建正则表达式的两种语法JavaScript 提供了两种创建正则表达式对象的方式最终得到的都是内置RegExp类的实例。长语法new RegExp(pattern, flags)let regexp new RegExp(pattern, flags);模式与标志都以字符串形式传入。这种语法适合在运行时动态拼接模式因为模式来自字符串可以使用模板字符串、变量插值等动态手段。短语法斜杠字面量/pattern/flagslet regexp /pattern/; // 无标志 let regexp /pattern/gmi; // 带标志 g、m、i含义见下文斜杠/.../告诉 JavaScript 这里正在创建一个正则表达式其作用与字符串的引号相同——界定内容的边界。两种语法的核心区别斜杠字面量/.../是完全静态的模式内部不允许插入表达式不能像字符串模板字面量那样使用${...}进行插值。因此它适用于在编写代码时就已经确定模式的场景——这也是最常见的场景。new RegExp更常用于按需动态生成当模式需要从动态生成的字符串中构造时使用。例如根据用户输入构造标签匹配表达式let tag prompt(What tag do you want to find?, h2); let regexp new RegExp(${tag}); // 若上一步回答 h2则等价于 /h2/需要注意的是由于new RegExp接收的是字符串模式中的反斜杠需要按字符串转义规则书写例如要匹配\d需写成new RegExp(\\d)这是动态创建时最常见的易错点。六个标志Flags详解标志flags会直接影响搜索行为。JavaScript 中一共只有 6 个标志可以任意组合顺序无关紧要标志名称/含义行为说明iignoreCase忽略大小写搜索不区分大小写A与a视为相同gglobal全局查找所有匹配不带它时只返回第一个匹配mmultiline多行模式使^、$锚点匹配每行的开头/结尾详见 05-regexp-multiline-modesdotall点号匹配所有使点号.也能匹配换行符\n详见 02-regexp-character-classesuunicode完整 Unicode 支持正确代理对surrogate pair处理并启用\p{...}属性查找详见 03-regexp-unicodeysticky粘性模式仅在文本中的精确位置开始搜索详见 16-regexp-sticky几点值得强调g是最常用的标志没有它str.match、str.replace等只处理第一个匹配带上它才处理全部匹配。在多行文本校验、全局替换等场景下几乎必用。u标志对现代应用越来越重要默认情况下正则表达式会把 4 字节的长字符如、这类代理对当作两个 2 字节字符处理导致匹配结果怪异加上u后按字符正确处理并解锁\p{Letter}、\p{Number}等 Unicode 属性类例如str.match(/\p{L}/gu)可跨语言匹配字母。y与g都依赖regexp.lastIndex属性定位但g允许从lastIndex起向后任意搜索y则严格要求匹配必须恰好始于lastIndex位置这在词法分析等定点读取任务中非常有用。提示本系列文档后续统一使用颜色约定正则表达式为红色pattern:、被搜索的字符串为蓝色subject:、匹配结果为绿色match:。搜索str.match(regexp)方法str.match(regexp)在字符串str中查找regexp的所有匹配它有 3 种工作模式这是理解返回值的关键。模式一带g标志——返回全部匹配的数组let str We will, we will rock you; alert( str.match(/we/gi) ); // We,we包含 2 个子串的数组注意这里We和we都被找到正是因为i标志使正则表达式不区分大小写。模式二不带g标志——返回第一个匹配及细节此时返回一个数组完整匹配位于索引0数组还携带额外的属性let str We will, we will rock you; let result str.match(/we/i); // 不带 g 标志 alert( result[0] ); // We第 1 个匹配 alert( result.length ); // 1 // 附加细节 alert( result.index ); // 0匹配的位置 alert( result.input ); // We will, we will rock you原始字符串如果模式中包含括号捕获组数组还会有0之外的索引第 1 组在1、第 2 组在2……这部分在 11-regexp-groups 中详细展开。完整的返回结构含index、input、捕获组在 17-regexp-methods 中也有系统介绍。模式三无匹配——返回null最重要的陷阱无论是否带g标志只要没有匹配str.match返回的都是null而非空数组。忘记这一点很容易引发运行时错误let matches JavaScript.match(/HTML/); // null if (!matches.length) { // Error: Cannot read property length of null alert(Error in the line above); }如果你希望结果永远是数组可以用|| []兜底let matches JavaScript.match(/HTML/) || []; if (!matches.length) { alert(No matches); // 现在可以正常工作 }替换str.replace(regexp, replacement)方法str.replace(regexp, replacement)用replacement替换str中regexp找到的匹配带g标志替换所有匹配否则只替换第一个。// 不带 g只替换第一处 alert( We will, we will.replace(/we/i, I) ); // I will, we will // 带 g替换全部 alert( We will, we will.replace(/we/ig, I) ); // I will, I will替换字符串中的特殊符号第二个参数replacement是一个替换字符串其中可以嵌入特殊符号组合来插入匹配的片段符号在替换字符串中的作用$插入完整匹配$插入匹配之前的那部分字符串$插入匹配之后的那部分字符串$n若n是 12 位数字插入第 n 个括号捕获组的内容详见 11-regexp-groups$name插入指定name的命名捕获组内容详见 11-regexp-groups$$插入字符$本身使用$的示例alert( I love HTML.replace(/HTML/, $ and JavaScript) ); // I love HTML and JavaScript进阶用函数作为替换逻辑当替换逻辑复杂如大小写转换、根据位置计算时replace的第二个参数还可以是函数它会在每次匹配时被调用并返回替换文本。函数签名按有无捕获组而变化通常为(match, p1, p2, ..., pn, offset, input, groups)详见 17-regexp-methods 中对str.replace的深入讲解。例如把匹配全部转大写let result str.replace(/html|css/gi, str str.toUpperCase());测试regexp.test(str)方法regexp.test(str)用于是否存在至少一个匹配的判断找到返回true否则返回false。它不像match那样返回匹配内容因此非常适合布尔校验场景如表单格式验证let str I love JavaScript; let regexp /LOVE/i; alert( regexp.test(str) ); // truei 标志使大小写不敏感一个值得注意的行为如果正则表达式带g标志test也会像exec一样从regexp.lastIndex属性位置开始搜索并推进该属性。这意味着同一个全局正则反复用于不同字符串可能得到意外结果——在 17-regexp-methods 中有专门警告连续两次对同一文本调用regexp.test第二次可能因lastIndex已非零而返回false。规避方法是每次搜索前手动重置regexp.lastIndex 0或者改用不依赖lastIndex的字符串方法如str.match、str.search。相关方法与后续学习路线str.match、str.replace、regexp.test是正则表达式入门的三驾马车。除此之外JavaScript 还提供str.matchAll返回含捕获组的迭代器、str.split(regexp)按正则分隔字符串、str.search(regexp)返回首个匹配位置、regexp.exec配合lastIndex逐次取匹配等更进阶的方法完整讲解见 17-regexp-methods。在本仓库的正则表达式专题9-regular-expressions中你可以按顺序继续深入字符类\d、\s、\w及反向类02-regexp-character-classesUnicode 标志u与\p{...}属性查找03-regexp-unicode锚点^、$与多行模式m04-regexp-anchors、05-regexp-multiline-mode捕获组与命名组11-regexp-groups粘性标志y与定点搜索16-regexp-sticky小结一个正则表达式由模式和可选标志组成共 6 个标志g、i、m、u、s、y。创建方式有两种斜杠字面量/pattern/flags静态、最常用与new RegExp(pattern, flags)动态生成模式时使用两者都产生RegExp实例。不带标志和特殊符号时正则搜索等同于子串搜索。str.match(regexp)查找匹配带g返回全部匹配的数组不带g返回首匹配数组含index、input细节无匹配返回null可用|| []兜底。str.replace(regexp, replacement)替换匹配带g替换全部否则只替换第一个替换串支持$、$、$、$n、$name、$$等特殊符号也可传函数实现智能替换。regexp.test(str)返回布尔值至少一个匹配为true否则为false带g时注意lastIndex状态带来的副作用。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐终极gcpp分配器指南deferred_allocator与STL容器完美集成终极gcpp分配器指南deferred_allocator与STL容器完美集成 gcppGitHub 加速计划是一个实验性的 C延迟和无序销毁库其核Coding WebIDE为什么你需要一个云端开发环境Coding WebIDE为什么你需要一个云端开发环境 想象一下你可以在任何地方、任何设备上编写代码无需配置复杂的开发环境无需担心软件兼容性问题只需开发工具IDE后端Modern JavaScript Tutorial 正则表达式系列锚点 ^ $ 的多行模式与 m 标志详解Modern JavaScript Tutorial 正则表达式系列锚点 ^ $ 的多行模式与 m 标志详解 导读 在处理多行文本如日志、配置文件、Mark文档/教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考