)
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本篇是 Modern JavaScript Tutorialen.javascript.info正则表达式章节的核心篇章之一系统讲解 JavaScript 正则表达式中最常用的字符类character classes\d、\s、\w三大正向类、它们的反义类\D、\S、\W以及任意字符的点号.与s标志。你将掌握如何用字符类完成提取纯数字电话号码按模式批量匹配跨换行匹配等实战任务并理解空格在正则中的地位、[\s\S]的由来以及通向 Unicode 属性匹配\p{...}的进阶路径。一个实战任务把电话号码清洗成纯数字假设有一个电话号码字符串7(903)-123-45-67需要把它变成纯数字79031234567去掉、括号和连字符。最直观的思路是找到所有数字并拼起来——这正是字符类\d的用武之地。**字符类character class**是一种特殊记号它匹配某个集合中的任意一个符号。\d就是数字类对应任意单个数字。先用\d找到电话号码中的第一个数字let str 7(903)-123-45-67; let regexp /\d; alert( str.match(regexp) ); // 7注意没有g标志时正则表达式只返回第一个匹配项。加上g标志后match会返回一个包含全部匹配项的数组let str 7(903)-123-45-67; let regexp /\d/g; alert( str.match(regexp) ); // 数组7,9,0,3,1,2,3,4,5,6,7 // 把数组拼回字符串就得到纯数字电话号码 alert( str.match(regexp).join() ); // 79031234567这里用到的str.match(regexp)有两种工作模式带g标志时返回所有匹配的数组不带g时只返回第一个匹配数组形式额外带index、input等属性没有任何匹配时返回null而非空数组这是一个极易踩坑的细节详见本仓库的 正则表达式基础与标志 章节。三大常用字符类\d、\s、\w字符类远不止数字一种。JavaScript 中最常用的是以下三个字符类名称来源匹配内容\dd digit一个数字0到9之间的任意字符\ss space一个空白符号包括空格、制表符\t、换行符\n以及少数罕见字符如\v、\f、\r\ww word一个单词字符拉丁字母、数字或下划线_。非拉丁字母如西里尔字母、印地语字母不属于\w字符类可以按顺序串联使用。例如\d\s\w表示一个数字 一个空白字符 一个单词字符可以匹配1 a这样的片段。正则表达式可以同时包含普通字符与字符类。例如CSS\d匹配字符串CSS后面紧跟一个数字let str Is there CSS4?; let regexp /CSS\d/; alert( str.match(regexp) ); // CSS4也可以连续使用多个字符类。下面的正则\s\w\w\w\w\d依次匹配空格 4 个单词字符 数字恰好命中字符串I love HTML5!中的 HTML5alert( I love HTML5!.match(/\s\w\w\w\w\d/) ); // HTML5其中每个字符类与结果字符一一对应字符类的本质常用类的展开形式从本仓库后续章节 集合与范围 [...] 的定义看这些字符类本质上是特定字符集合的简写shorthand\d—— 等价于[0-9]\w—— 等价于[a-zA-Z0-9_]\s—— 等价于[\t\n\v\f\r ]外加少量罕见的 Unicode 空白字符。这解释了一个重要推论既然\w只是[a-zA-Z0-9_]的简写它自然无法匹配中文、西里尔字母等非拉丁字符。如果业务上需要任意语言的单词字符可以自行构造集合[\p{Alpha}\p{M}\p{Nd}\p{Pc}\p{Join_C}]配合u标志这正是 集合与范围 章节中的多语言\w方案。反义类\D、\S、\W每一个字符类都有对应的反义类inverse class写法是同一个字母的大写形式。反义意味着匹配除该类之外的所有其他字符反义类匹配内容\D非数字除\d之外的任意字符例如字母\S非空白除\s之外的任意字符例如字母\W非单词字符除\w之外的任意字符例如非拉丁字母或空格回到开头的电话号码清洗任务。当时我们用\d加g标志找出所有数字再拼接。另一个更短的思路是找到所有非数字\D把它们从字符串中删除let str 7(903)-123-45-67; alert( str.replace(/\D/g, ) ); // 79031234567这里的str.replace(regexp, replacement)配合g标志会替换所有匹配项不带g则只替换第一个replacement传空字符串即实现删除。两种思路殊途同归一种是保留数字一种是剔除杂质后者在字段清洗、格式化校验场景中非常实用。点号.匹配任意字符除换行外点号.是一个特殊的字符类匹配除换行符\n之外的任意字符。alert( Z.match(/./) ); // Z用在正则中间同样有效。/CS.4/可以命中CSS4、CS-4、CS 4空格也是一个字符let regexp /CS.4/; alert( CSS4.match(regexp) ); // CSS4 alert( CS-4.match(regexp) ); // CS-4 alert( CS 4.match(regexp) ); // CS 4空格同样能匹配注意点号表示任意一个字符而不是没有字符。点号必须对应一个真实存在的字符否则匹配失败alert( CS4.match(/CS.4/) ); // null匹配失败因为这里没有字符可供点号匹配CS4中S与4之间没有任何字符所以/CS.4/要求4 个位置而字符串只有 3 个字符自然无匹配。让点号真正匹配任意字符s 标志与 [\s\S] 技巧默认情况下点号不匹配换行符\n。例如正则/A.B/要求A和B之间恰好有一个非换行的任意字符alert( A\nB.match(/A.B/) ); // null无匹配很多时候我们希望点号真的表示任意字符包括换行。这时使用s标志即 dotall 模式一旦启用点号就匹配字面意义上的任何字符alert( A\nB.match(/A.B/s) ); // A\nB匹配成功IE 不支持s标志好消息是有一个在任何环境都能工作的替代方案用[\s\S]来匹配任意字符该写法在 集合与范围 章节中会正式介绍。alert( A\nB.match(/A[\s\S]B/) ); // A\nB匹配成功[\s\S]的字面含义是空白字符 或 非空白字符合起来就是一切。同理也可以换用其他互补类如[\d\D]甚至可以写[^]表示匹配除无之外的任意字符。这个技巧还带来一个好处当同一个正则中**同时需要两种点号**时普通点号保持不含换行的常规行为而用[\s\S]表示含换行的任意字符可以用同一个模式实现。警惕空格空格也是字符日常书写中我们几乎不留意空格字符串1-5和1 - 5在我们眼里差不多。但在正则中空格是一个和任何其他字符同等重要的字符——如果正则没有考虑空格就可能匹配失败。试试匹配被连字符分隔的两个数字alert( 1 - 5.match(/\d-\d/) ); // null匹配失败字符串1 - 5的实际结构是1、空格、-、空格、5而正则\d-\d要求的是数字、连字符、数字紧挨着中间没有空格所以失败。修正方案是把空格写进正则alert( 1 - 5.match(/\d - \d/) ); // 1 - 5成功 // 或者用 \s 类 alert( 1 - 5.match(/\d\s-\s\d/) ); // 1 - 5同样成功结论正则表达式里所有字符都有意义空格也不例外。不能指望在正则中随意增删空格还能得到相同结果。字符类与量词的组合从单个数字到完整数字单个\d只能匹配一位数字。回到电话号码7(903)-123-45-67如果我们想要的是完整的数字7、903、123、45、67而不是一个个单数字就需要在字符类后面追加量词quantifier。一个或多个数字在量词语法中可以写成\d{1,}或简写\dlet str 7(903)-123-45-67; alert( str.match(/\d{1,}/g) ); // 7,903,123,45,67 alert( str.match(/\d/g) ); // 7,903,123,45,67量词一个或多个、?零个或一个、*零个或多个以及精确次数{n}、范围{n,m}的完整用法见本仓库的 量词 、*、? 与 {n} 章节。字符类负责匹配什么量词负责匹配多少个两者结合几乎可以描述一切文本模式。字符类的进阶Unicode 属性与 \p{...}字符类能覆盖的只是基础字符集。JavaScript 字符串采用 Unicode 编码每个字符还带有大量属性properties它属于哪种语言的字母、是否是标点、是否是货币符号等。借助u标志与\p{...}语法可以按属性搜索字符例如\p{L}匹配任何语言的字母、\p{scHan}匹配汉字、\p{Sc}匹配货币符号let str A ბ ㄱ; alert( str.match(/\p{L}/gu) ); // A,ბ,ㄱ alert( str.match(/\p{L}/g) ); // null没有 u 标志\p 不生效这正是字符类章节末尾预告的内容——\d、\w无法覆盖非拉丁文字而 Unicode 属性让按语言/类别匹配成为可能详见本仓库的 Unicodeu 标志与 \p{...} 章节。需要注意的是\p{...}同样依赖u标志而u标志对 4 字节的代理对surrogate pair字符的处理也与默认行为不同这些都会在后续章节展开。总结字符类速查表字符类含义\d数字\D非数字\s空白符号空格、制表符、换行符\S非空白除\s之外的一切\w拉丁字母、数字、下划线_\W非单词字符除\w之外的一切.带s标志时为任意字符否则为除换行\n之外的任意字符三个核心要点值得反复记忆反义类就是大写\D、\S、\W分别匹配\d、\s、\w的补集常用于剔除杂质如str.replace(/\D/g, )清洗电话号码点号 ≠ 没有字符.必须对应一个真实存在的字符需要匹配换行时用s标志或[\s\S]技巧空格是字符正则中的每一个字符包括空格都参与匹配书写正则时必须显式表达空白或用\s类覆盖。字符类只是正则世界的起点。后续章节将进一步讲解 Unicode 属性匹配u标志与\p{...}见 Unicodeu 标志与 \p{...}、集合与范围[...]、[^...]与排除区间见 集合与范围、量词见 量词以及分组、锚点、贪婪与懒惰匹配等逐步构建起完整的 JavaScript 正则知识体系正则表达式章节索引。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript 字符串引号全解析从三种引号到反引号 ${...} 模板插值Modern JavaScript Tutorial 实战JavaScript 字符串引号全解析从三种引号到反引号 ${...} 模板插值Modern JavaScript Tutorial 实战 字符串是 Ja文档/教程前端Modern JavaScript Tutorial 正则表达式系列锚点 ^ $ 的多行模式与 m 标志详解Modern JavaScript Tutorial 正则表达式系列锚点 ^ $ 的多行模式与 m 标志详解 导读 在处理多行文本如日志、配置文件、Mark文档/教程前端Modern JavaScript Tutorial 精读JavaScript 的 8 种数据类型与 typeof 运算符全解析Modern JavaScript Tutorial 精读JavaScript 的 8 种数据类型与 typeof 运算符全解析 JavaScript 中的每文档/教程前端上一篇OpenCore Legacy Patcher完整教程四步让老Mac重获新生修复显卡驱动和系统兼容性下一篇SWE-bench 快速入门指南三步跑通第一次 AI 编程能力评估创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考