JavaScript 正则表达式详解：创建方法、特殊字符、分组与常用案例

1. 正则表达式的创建方式

在 JavaScript 中，构建正则表达式主要有两种途径：

第一种是直接利用字面量语法，即使用一对斜杠将模式包裹起来，例如 /pattern/。
第二种是通过构造函数 new RegExp('pattern') 来实例化一个 RegExp 对象。


const re1 = /ABC\-001/;
const re2 = new RegExp('ABC\\-001');
re1; // /ABC\-001/
re2; // /ABC\-001/

需要特别注意的是，当采用第二种构造函数写法时，由于字符串内部存在转义机制，代码中书写的两个反斜杠 \\ 在运行时实际上只代表一个反斜杠 \。

2. 正则模式的使用

2.1 简单模式匹配

简单模式指的是直接匹配字面量字符。例如，模式 /abc/ 仅当字符串中按顺序同时出现字符 'a'、'b' 和 'c' 时才会匹配成功。在文本 "Hi, do you know your abc's?" 和 "The latest airplane designs evolved from slabcraft." 中，该模式均能成功匹配到子字符串 'abc'。然而，在字符串 "Grab crab" 中，由于不存在 'abc' 子串，匹配将失败。

2.2 特殊字符的使用

以模式 /abc/ 为例，这里的 'b' 实际上代表量词，表示前面的字符 'a' 出现零次或多次。因此，该模式匹配的是以 'a' 开头（'a' 可重复零次或多次），后接字符 'c' 的任意字符组合。在字符串 "s'scbbabbbbcdebc" 中，该模式匹配到的子字符串为 "abbbbc"。

字符	含义
\	匹配将依照下列规则：在非特殊字符之前的反斜杠表示下一个字符是特殊的，不能从字面上解释。例如，前面没有''的'd'通常匹配小写'd'。如果加了'',这个字符变成了一个特殊意义的字符，意思是匹配一个数字。反斜杠也可以将其后的特殊字符，转义为字面量。例如，模式 /a/ 代表会匹配 0 个或者多个 a。相反，模式 /a/ 将 '' 的特殊性移除，从而可以匹配像 "a" 这样的字符串。使用 new RegExp("pattern") 的时候也不要忘记将 \ 进行转义，因为 \ 在字符串里面也是一个转义字符。
^	匹配输入的开始，例如，/^A/ 并不会匹配 "an A" 中的 'A'，但是会匹配 "An E" 中的 'A'。
$	匹配输入的结束。例如，/t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。
*	匹配前一个表达式0次或多次。等价于 {0,}。例如，/bo*/会匹配 "A ghost boooooed" 中的 'booooo'
+	匹配前面一个表达式1次或者多次。等价于 {1,}。例如，/a+/匹配了在 "candy" 中的 'a'，和在 "caaaaaaandy" 中所有的 'a'。
?	匹配前面一个表达式0次或者1次。等价于 {0,1}。例如，/e?le?/ 匹配 "angel" 中的 'el'，和 "angle" 中的 'le' 以及"oslo' 中的'l'。如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。例如，对 "123abc" 应用 /\d+/ 将会返回 "123"，如果使用 /\d+?/,那么就只会匹配到 "1"。
.	匹配除换行符之外的任何单个字符。例如，/.n/将会匹配 "nay, an apple is on the tree" 中的 'an' 和 'on'，但是不会匹配 'nay'。
x	y
{n}	n是一个正整数，匹配了前面一个字符刚好发生了n次。比如，/a{2}/不会匹配“candy”中的'a',但是会匹配“caandy”中所有的a，以及“caaandy”中的前两个'a'。
{n,m}	n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0，这个值被忽略。例如，/a{1, 3}/ 并不匹配“cndy”中的任意字符，匹配“candy”中的a，匹配“caandy”中的前两个a，也匹配“caaaaaaandy”中的前三个a。注意，当匹配”caaaaaaandy“时，匹配的值是“aaa”，即使原始的字符串中有更多的a。
[xyz]	一个字符集合。匹配方括号中的任意字符，包括转义序列。你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义，不过转义也是起作用的。例如，[abcd] 和[a-d]是一样的。他们都匹配"brisket"中的‘b',也都匹配“city”中的‘c'。/[a-z.]+/ 和/[\w.]+/与字符串“test.i.ng”匹配。
[^xyz]	一个反向字符集。也就是说，它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。
\b	匹配一个词的边界。一个词的边界就是一个词不被另外一个“字”字符跟随的位置或者没有其他“字”字符在其前面的位置。注意，一个匹配的词的边界并不包含在匹配的内容中。换句话说，一个匹配的词的边界的内容的长度是0。例如： /\bm/匹配“moon”中的‘m'；/oo\b/并不匹配"moon"中的'oo'，因为'oo'被一个“字”字符'n'紧跟着。/oon\b/匹配"moon"中的'oon'，因为'oon'是这个字符串的结束部分。这样他没有被一个“字”字符紧跟着。
\d	匹配一个数字。等价于[0-9]。例如， /\d/ 或者 /[0-9]/ 匹配"B2 is the suite number."中的'2'。
\D	匹配一个非数字字符。等价于[^0-9]。例如， /\D/ 或者 /[^0-9]/ 匹配"B2 is the suite number."中的'B' 。
\f	匹配一个换页符 (U+000C)。
\n	匹配一个换行符 (U+000A)。
\r	匹配一个回车符 (U+000D)。
\s	匹配一个空白字符，包括空格、制表符、换页符和换行符。等价于[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。例如, /\s\w*/ 匹配"foo bar."中的' bar'。
\S	匹配一个非空白字符。等价于[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。例如， /\S\w*/ 匹配"foo bar."中的'foo'。
\t	匹配一个水平制表符 (U+0009)。
\w	匹配一个单字字符（字母、数字或者下划线）。等价于[A-Za-z0-9_]。例如, /\w/ 匹配 "apple," 中的 'a'，"$5.28,"中的 '5' 和 "3D." 中的 '3'。
\W	匹配一个非单字字符。
\n	在正则表达式中，它返回最后的第n个子捕获匹配的子字符串(捕获的数目以左括号计数)。

3. 正则表达式的应用场景

3.1 字符串分割

使用正则表达式进行字符串分割比使用固定分隔符更加灵活。通常的分割代码如下：


'a d   c'.split(' '); // ['a', 'd', '', '', 'c']

上述方法无法正确处理连续空格的情况，此时可以改用正则表达式来实现：


'a b   c'.split(/\s+/); // ['a', 'b', 'c']

通过这种方式，无论字符串中包含多少个连续空格，都能被正确分割。如果还需要处理逗号分隔符，可以进一步调整正则表达式：


'a,b, c  d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']

若还需处理分号分隔符，可继续扩展正则表达式：


'a,b;; c  d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']

由此可见，利用正则表达式可以将格式不规范的输入字符串转换为结构正确的数组。

3.2 分组提取

除了判断是否匹配，正则表达式还能用于提取子字符串。使用圆括号 () 表示分组（Group）。例如：

模式 ^(\d{4})-(\d{4,9})$ 定义了两个分组，可以直接从匹配的字符串中提取出区号和本地号码：


var re = /^(\d{4})-(\d{4,9})$/;
re.exec('0530-12306'); // ['010-12345', '010', '12345']
re.exec('0530 12306'); // null

exec() 方法在匹配成功时返回一个数组，该数组的第一个元素是正则表达式匹配到的完整字符串，后续元素表示匹配成功的子串（即分组内容）。

当 exec() 方法匹配失败时，将返回 null。

3.3 贪婪与非贪婪匹配

需要注意的是，正则匹配默认采用贪婪模式，即尽可能多地匹配字符。如下示例，旨在匹配数字后面的 '0'：


var re = /^(\d+)(0*)$/;
re.exec('102300'); // ['102300', '102300', '']

由于 \d+ 采用贪婪匹配，它会尽可能多地消耗数字，导致后面的 0* 只能匹配到空字符串。

为了让 \d+ 采用非贪婪匹配（即尽可能少地匹配），从而将后面的 '0' 正确匹配出来，可以在量词后添加问号 ?：


var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']

3.4 正则表达式标志


g	全局搜索。
i	不区分大小写搜索。
m	多行搜索。
y	执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标志。

3.5 test() 方法

test() 方法用于检测一个字符串是否匹配某个模式。如果字符串中包含匹配的文本，则返回 true，否则返回 false。


var re = /^(\d{4})-(\d{4,9})$/;
re.test('0530-12321'); // true
re.test('0530-123ab'); // false
re.test('0530 12321'); // false

4. 常用正则表达式参考


验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证身份证号（15位或18位数字）：^\d{15}|\d{}18$
中国大陆手机号码：1\d{10}
中国大陆固定电话号码：(\d{4}-|\d{3}-)?(\d{8}|\d{7})
中国大陆邮政编码：[1-9]\d{5}
IP地址：((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)
日期(年-月-日)：(\d{4}|\d{2})-((1[0-2])|(0?[1-9]))-(([12][0-9])|(3[01])|(0?[1-9]))
日期(月/日/年)：((1[0-2])|(0?[1-9]))/(([12][0-9])|(3[01])|(0?[1-9]))/(\d{4}|\d{2})
验证数字：^[0-9]*$
验证n位的数字：^\d{n}$
验证至少n位数字：^\d{n,}$
验证m-n位的数字：^\d{m,n}$
验证零和非零开头的数字：^(0|[1-9][0-9]*)$
验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数：^\+?[1-9][0-9]*$
验证非零的负整数：^\-[1-9][0-9]*$
验证非负整数（正整数 + 0） ^\d+$
验证非正整数（负整数 + 0） ^((-\d+)|(0+))$
验证长度为3的字符：^.{3}$
验证由26个英文字母组成的字符串：^[A-Za-z]+$
验证由26个大写英文字母组成的字符串：^[A-Z]+$
验证由26个小写英文字母组成的字符串：^[a-z]+$
验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

总结

本文介绍到此结束，希望能为读者提供帮助，同时也欢迎大家关注本站以获取更多相关内容！

JavaScript 正则表达式：创建、匹配与实战应用