JavaScript中的正则表达式使用详解

正则表达式是对字符串模式匹配和处理的工具，它广泛应用于文本处理、搜索、替换等场景中。JavaScript中可以通过RegExp对象来创建正则表达式。本文将从以下几个方面详细讲解JavaScript中的正则表达式的使用。

创建正则表达式

在JavaScript中，有两种方式来创建一个正则表达式。

字面量语法创建正则表达式

使用字面量语法创建正则表达式，可以直接在代码中定义正则表达式模式。一个正则表达式字面量可以包含在一个对正则表达式的单一运算中，或者它可以在一对正斜杠之间，如下所示：

var reg1 = /abc/;
var reg2 = /[a-z]/;

其中，/abc/表示匹配字符串中的abc子串，/[a-z]/表示匹配字符串中的任意一个小写字母。

通过RegExp构造函数创建正则表达式

通过RegExp构造函数创建正则表达式，可以在运行时构造一个动态的正则表达式模式，如下所示：

var reg = new RegExp("abc");

其中，"abc"表示匹配字符串中的abc子串。

正则表达式匹配

在JavaScript中，可以通过RegExp对象的test()和exec()方法对正则表达式进行匹配。

test()方法

test()方法用于检测字符串是否匹配某个正则表达式模式，返回true或false。示例如下：

var str = "abc";
var reg = /abc/;
console.log(reg.test(str)); // 输出true

exec()方法

exec()方法用于检索字符串中与正则表达式匹配的值，返回一个数组或null。每次调用exec()方法时，它会在字符串中继续查找新的匹配值，直到找到所有匹配为止。示例如下：

var str = "hello world, world!";
var reg = /world/g;
var result;
while (result = reg.exec(str)) {
    console.log(result[0], result.index);
}
// 输出：
// "world" 6
// "world" 14

其中，/world/g表示全局匹配模式，它会查找所有匹配而不是在找到第一个匹配后停止。

正则表达式模式

在正则表达式中，可以使用各种特殊字符、元字符和量词符来定义匹配规则。

特殊字符

正则表达式中的特殊字符，用于匹配特定的字符或字符集。如下表所示：

特殊字符	描述
.	匹配除换行符外的任意单个字符
^	匹配字符串的开头
$	匹配字符串的结尾
\	转义字符
[]	字符集，匹配其中任意一个字符
[^]	否定字符集，不匹配其中任意一个字符
()	组，将多个字符作为一个单元匹配
\|	分支，匹配其中任意一个分支
?	匹配0个或1个元素
*	匹配0个或多个元素
+	匹配1个或多个元素
{n}	匹配n个元素
{n,}	匹配n个或更多元素
{n,m}	匹配n到m个元素

元字符

正则表达式中的元字符，用于匹配特定的字符类型或位置。如下表所示：

元字符	描述
\d	数字字符，等价于[0-9]
\D	非数字字符，等价于[^0-9]
\w	单词字符，等价于[a-zA-Z0-9_]
\W	非单词字符，等价于[^a-zA-Z0-9_]
\s	空白字符
\S	非空白字符
\b	单词边界
\B	非单词边界

量词符

正则表达式中的量词符，用于指定匹配规则的重复次数。如下表所示：

量词符	描述
?	匹配0个或1个元素
*	匹配0个或多个元素
+	匹配1个或多个元素
{n}	匹配n个元素
{n,}	匹配n个或更多元素
{n,m}	匹配n到m个元素

正则表达式实践

以下是两个关于JavaScript中正则表达式的示例，分别是对手机号和邮箱合法性的验证。

验证手机号

下面示例的正则表达式是用于验证中国大陆11位手机号的合法性，允许前缀为86或+86。首先定义一个手机号的输入框：

<input type="text" name="phone" id="phone" placeholder="请输入手机号">

然后使用JavaScript代码进行验证：

var phoneInput = document.getElementById("phone");
var phoneReg = /^(86|\+86)?1[3-9]\d{9}$/;
phoneInput.addEventListener("blur", function() {
    var phone = phoneInput.value;
    if (!phoneReg.test(phone)) {
        alert("手机号格式不正确！");
    }
});

其中，/^(86|+86)?1[3-9]\d{9}$/表示：

^，匹配字符串的开头；
(86|+86)?，括号内的?表示0个或1个元素，括号中的|表示或的关系，表示匹配"86"或"+86"；
1，匹配1；
[3-9]，匹配3-9中的任意一个数字；
\d{9}，匹配9个数字；
$，匹配字符串的结尾。

验证邮箱

下面示例的正则表达式是用于验证邮箱的合法性，允许数字、字母、下划线、点、横线、@符号。首先定义一个邮箱的输入框：

<input type="text" name="email" id="email" placeholder="请输入邮箱">

然后使用JavaScript代码进行验证：

var emailInput = document.getElementById("email");
var emailReg = /^\w+([\.-]\w+)*@\w+([\.-]\w+)*(\.\w{2,3})+$/;
emailInput.addEventListener("blur", function() {
    var email = emailInput.value;
    if (!emailReg.test(email)) {
        alert("邮箱格式不正确！");
    }
});

其中，/^\w+([.-]\w+)@\w+([.-]\w+)(.\w{2,3})+$/表示：