正则表达式系列之 —— 字符类

Posted 2023-02-14 LeviDing

本号是《现代 javascript 教程》^[1]官方微信公众号

字符类

考虑一个实际的任务 —— 我们有一个电话号码，例如 "[phone]"，我们需要将其转换为纯数字：79031234567。

为此，我们可以查找并删除所有非数字的内容。字符类可以帮助我们实现它。

字符类（Character classes） 是一种特殊的符号，匹配特定集合中的任何符号。

首先，让我们探索“数字”类。它写为 \\d，对应于“任何一位数字”。

例如，让我们找到电话号码的第一个数字：

let str = "[phone]";

let regexp = /\\d/;

alert( str.match(regexp) ); // 7

如果没有修饰符 g，则正则表达式仅查找第一个匹配项，即第一个数字 \\d。

让我们添加修饰符 g 来查找所有数字：

let str = "[phone]";

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

这是数字的字符类。还有其他字符类。

最常用的是：

\\d（"d" 来自 "digit"）：数字 —— 从 0 到 9 的字符。

\\s（"s" 来自 "space"）：空格符号 —— 包括空格，制表符 \\t，换行符 \\n 和其他少数稀有字符，例如 \\v、\\f 和 \\r。

\\w（"w" 来自 "word"）：“单字”字符 —— 拉丁字母或数字或下划线 _。非拉丁字母（如西里尔字母或印地文）不属于 \\w。

例如，\\d\\s\\w 表示“数字”，后跟“空格字符”，后跟“单字字符”，例如 1 a。

正则表达式可能同时包含常规符号和字符类。

例如，CSS\\d 匹配 CSS 后面带有一个数字的字符串：

let str = "Is there CSS4?";
let regexp = /CSS\\d/

alert( str.match(regexp) ); // CSS4

我们还可以使用更多字符类：

alert( "I love html5!".match(/\\s\\w\\w\\w\\w\\d/) ); // ' HTML5'

匹配项（每个正则表达式字符类都有对应的结果字符）：

反向类

对于每个字符类，都有一个“反向类”，用相同的字母表示，但是大写的。

“反向”表示它与所有其他字符匹配，例如：

\\D：非数字 —— 除 \\d 以外的任何字符，例如字母。

\\S：非空格符号 —— 除 \\s 以外的任何字符，例如字母。

\\W：非单字字符 —— 除 \\w 以外的任何字符，例如非拉丁字母或空格。

在本章的开头，我们看到了如何从 [phone] 这样的字符串中创建一个只包含数字的电话号码：找到所有的数字并将它们连接起来。

let str = "[phone]";

alert( str.match(/\\d/g).join('') ); // 79031234567

另一种快捷的替代方式是查找非数字 \\D 并将其从字符串中删除：

let str = "[phone]";

alert( str.replace(/\\D/g, "") ); // 79031234567

点（.）匹配“任何字符”

点 . 是一种特殊字符类，它与“除换行符之外的任何字符”匹配。

例如：

alert( "Z".match(/./) ); // Z

或在正则表达式中间：

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，没有匹配项，因为这里没有与点匹配的字符

带有修饰符 "s" 时点字符类匹配任何字符

默认情况下，点与换行符 \\n 不匹配。

例如，正则表达式 A.B 匹配 A，然后匹配 B 和它们之间的任何字符，除了换行符\\n：

alert( "A\\nB".match(/A.B/) ); // null（无匹配项）

在很多情况下，我们希望点能够匹配“任何字符”，包括换行符。

这就是修饰符 s 所做的事。如果有一个正则表达式具有该修饰符，那么点 . 能够匹配任何字符：

alert( "A\\nB".match(/A.B/s) ); // A\\nB（匹配了！）

IE 浏览器不支持

IE 浏览器不支持 s 修饰符。

幸运的是，有一个替代方案，我们可以使用像 [\\s\\S] 这样的正则表达式来匹配“任何字符”（此模式将在 集合和范围 [...]^[2] 中介绍）。

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，没有匹配项！

让我们修复一下，在正则表达式中添加空格 \\d - \\d：

alert( "1 - 5".match(/\\d - \\d/) ); // 1 - 5，现在可以了
// 或者我们可以使用 \\s 类：
alert( "1 - 5".match(/\\d\\s-\\s\\d/) ); // 1 - 5，也可以

一个空格是一个字符。与其他字符同等重要。

我们无法在正则表达式中添加或删除空格后，还期望它的作用能像之前那样不被改变。

换句话说，在正则表达式中，所有字符都很重要，空格也很重要。

总结

存在以下字符类：

• \\d —— 数字。

• \\D —— 非数字。

• \\s —— 空格符号，制表符，换行符。

• \\S —— 除了 \\s 。

• \\w —— 拉丁字母，数字，下划线 '_'。

• \\W —— 除了 \\w。

• . —— 带有修饰符 's' 时匹配任何字符，否则匹配除换行符 \\n 之外的任何字符。

……但这还不是全部！

JavaScript 用于字符串的 Unicode 编码提供了很多字符属性，例如：这个字母属于哪种语言（如果它是一个字母），它是标点符号吗，等等。

我们也可以通过这些属性进行搜索。这需要修饰符 u，我们将在下一篇文章中介绍。

---

现代 JavaScript 教程：开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程^[3]。

在线免费阅读：https://zh.javascript.info

参考资料

[1]

《现代 JavaScript 教程》: https://zh.javascript.info/

[2]

集合和范围 [...]: https://zh.javascript.info/regexp-character-sets-and-ranges

[3]

React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources