开启掘金成长之旅!这是我参与「掘金日新计划 · 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,没有匹配项,因为这里没有与点匹配的字符