字符类

50 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第17天,点击查看活动详情

考虑一个实际的任务 —— 我们有一个电话号码,例如 "+7(903)-123-45-67",我们需要将其转换为纯数字:79031234567

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

字符类(Character classes)  是一种特殊的符号,匹配特定集合中的任何符号。

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

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

let str = "+7(903)-123-45-67";

let regexp = /\d/;

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

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

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

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

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

最常用的是:

  • \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 以外的任何字符,例如非拉丁字母或空格。

在本章的开头,我们看到了如何从 +7(903)-123-45-67 这样的字符串中创建一个只包含数字的电话号码:找到所有的数字并将它们连接起来。

let str = "+7(903)-123-45-67";

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

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

let str = "+7(903)-123-45-67";

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