本文档介绍了JavaScript正则表达式的使用，包括创建正则表达式的方法、元字符、特殊序列以及各种匹配操作。通过示例展示了如何验证电话号码和电子邮件地址，深入理解JavaScript中的搜索和替换操作。
文章目录
在本教程中，您将借助示例了解 JavaScript 正则表达式 (Regex)。
在 JavaScript 中，正则表达式( RegEx ) 是描述用于定义搜索模式的字符序列的对象。例如，
/^a...s$/
上面的代码定义了一个 RegEx 模式。模式是：任何以 a 开头、以 s 结尾的五个字母字符串。
使用 RegEx 定义的模式可用于匹配字符串。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| /^a...s$/ | abs | 不匹配 |
| alias | 匹配 | |
| abyss | 匹配 | |
| Alias | 不匹配 | |
| An abacus | 不匹配 |
创建正则表达式
有两种方法可以在 JavaScript 中创建正则表达式。
- 使用正则表达式字面量：
正则表达式由一个包含在斜杠 / 之间的模式组成。例如，
cost regularExp = /abc/;
这里，/abc/ 是一个正则表达式。
- 使用 RegExp() 构造函数：
您也可以通过调用构造函数 RegExp() 来创建正则表达式。例如，
const reguarExp = new RegExp('abc');
例如，
const regex = new RegExp(/^a...s$/);
console.log(regex.test('alias')); // true
在上面的示例中，字符串 alias 与 RegEx 模式 /^a…s$/ 匹配。在这里，test() 方法用于检查字符串是否与模式匹配。
还有其他几种方法可用于 JavaScript 正则表达式。在我们探索它们之前，让我们了解一下正则表达式本身。
如果您已经了解 RegEx 的基础知识，请跳转到 JavaScript RegEx 方法。
使用正则表达式指定模式
为了指定正则表达式，使用元字符。在上面的示例( /^a…s$/)中 ，^ 和 $ 是元字符。
元字符
元字符是由 RegEx 引擎以特殊方式解释的字符。以下是元字符列表：
[] . ^ $ * + ? {} () \ |
[] - 方括号
方括号指定您希望匹配的一组字符。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| [abc] | a | 1个匹配项 |
| ac | 2个匹配项 | |
| Hey Jude | 不匹配 | |
| abc de ca | 5个匹配项 |
这里，[abc] 将匹配您试图匹配的字符串是否包含 a、b 或 c 中的任何一个。
还可以使用方括号内的 - 指定字符范围。
[a-e] 与 [abcde] 是一样的。
[1-4] 与 [1234] 是一样的。
[0-39] 与 [01239] 是一样的。
您可以在方括号的开头使用插入符号 ^ 来补充（反转）字符集。
[^abc] 表示除 a 或 b 或 c 之外的任何字符。
[^0-9] 表示任何非数字字符。
. - 句点
句点匹配任何单个字符（换行符 “\n” 除外）。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| .. | a | 不匹配 |
| ac | 1个匹配项 | |
| acd | 1个匹配项 | |
| acde | 2 个匹配项（包含 4 个字符） |
^ - 插入符号
插入符号 ^ 用于检查字符串是否以某个字符开头。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| ^a | a | 1个匹配项 |
| abc | 1个匹配项 | |
| bac | 不匹配 | |
| ^ab | abc | 1个匹配项 |
| acb | 不匹配（以a开头，但不后跟b） |
$ - 美元符号
美元符号 $ 用于检查字符串是否以某个字符结尾。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| a$ | a | 1个匹配项 |
| formula | 1个匹配项 | |
| cab | 不匹配 |
* - 星号
星号 * 在字符后，匹配零次或多次出现的字符。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| ma*n | mn | 1个匹配项 |
| man | 1个匹配项 | |
| mann | 1个匹配项 | |
| main | 不匹配（a后面不跟n） | |
| woman | 1个匹配项 |
+ - 加号
加号 + 在字符后，匹配出现一次或多次的字符。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| ma+n | mn | 不匹配（无a字符） |
| man | 1个匹配项 | |
| mann | 1个匹配项 | |
| main | 不匹配（a后面不跟n） | |
| woman | 1个匹配项 |
? - 问号
问号符号 ? 出现在字符后，匹配出现零次或一次的字符。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| ma?n | mn | 1个匹配项 |
| man | 1个匹配项 | |
| maan | 不匹配（多于一个 a 字符） | |
| main | 不匹配（a 后面不跟 n） | |
| woman | 1个匹配项 |
{} - 大括号
考虑以下代码：{n,m}。匹配至少有 n 次，最多有 m 次出现的字符。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| a{2,3} | abc dat | 不匹配 |
| abc daat | 1个匹配项 | |
| aabc daaat | 2个匹配项 | |
| aabc daaaat | 2 个匹配项 |
让我们再看一个例子。正则表达式 [0-9]{2, 4} 至少匹配2个数字，但不超过4个数字。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| [0-9]{2,4} | ab123csde | 1个匹配项 |
| 12 and 345673 | 3个匹配项 | |
| 1 and 2 | 不匹配 |
| - 交替
竖条 | 用于交替（or 操作符）
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| a|b | cde | 不匹配 |
| ade | 1个匹配项 | |
| acdbea | 3个匹配项 |
这里，a|b 匹配任何包含 a 或 b 的字符串。
() - 组
括号 () 用于分组子模式。例如，(a|b|c)xz 匹配 a 或 b 或 c 后跟 xz 的字符串。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| (a|b|c)xz | ab xz | 不匹配 |
| abxz | 1个匹配项 | |
| axz cabxz | 2个匹配项 |
\ - 反斜杠
反斜杠 \ 用于转义各种字符，包括所有元字符。例如，
如果字符串包含 $ 并后跟 \a，则匹配 $a 。此处，$ 不是由正则表达式引擎以特殊方式解释的。
如果您不确定某个字符是否有特殊含义，可以将 \ 置于其前面。这确保不会以特殊方式处理字符。
特殊序列
特殊序列使常用模式更易于编写。以下是特殊序列的列表：
\A - 如果指定的字符位于字符串的开头，则匹配。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \Athe | the sun | 匹配 |
| In the sun | 不匹配 |
\b - 如果指定的字符位于单词的开头或结尾，则匹配。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \bfoo | football | 匹配 |
| a football | 匹配 | |
| foo\b | a football | 不匹配 |
| the foo | 匹配 | |
| the afoo test | 匹配 | |
| the afootest | 不匹配 |
\B - 与 \b 相反。如果指定的字符不在单词的开头或结尾，则匹配。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \Bfoo | football | 不匹配 |
| a football | 不匹配 | |
| foo\B | a football | 匹配 |
| the foo | 不匹配 | |
| the afoo test | 不匹配 | |
| the afootest | 匹配 |
\d - 匹配任何十进制数字。相当于 [0-9]
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \d | 12abc3 | 3个匹配项 |
| JavaScript | 不匹配 |
\D - 匹配任何非十进制数字。相当于[^0-9]
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \D | 1ab34"50 | 3个匹配项 |
| 1345 | 不匹配 |
\s - 匹配字符串包含任何空白字符的位置。相当于 [ \t\n\r\f\v] 。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \s | JavaScript RegEx | 1个匹配项 |
| JavaScriptRegEx | 不匹配 |
\S - 匹配字符串包含任何非空白字符的位置。相当于 [^ \t\n\r\f\v]。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \S | a b | 2个匹配项 |
| 不匹配 |
\w - 匹配任何字母数字字符（数字和字母）。相当于 [a-zA-Z0-9_]。顺便说一句，下划线 _ 也被认为是字母数字字符。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \w | 12&": ;c | 3个匹配项 |
| %"> ! | 不匹配 |
\W - 匹配任何非字母数字字符。相当于[^a-zA-Z0-9_]
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| \W | 1a2%c | 1个匹配项 |
| JavaScript | 不匹配 |
\Z - 如果指定的字符位于字符串的末尾，则匹配。
| 表达式 | 字符串 | 匹配? |
|---|---|---|
| JavaScript\Z | I like JavaScript | 匹配 |
| I like JavaScript Programming | 不匹配 | |
| JavaScript is fun | 不匹配 |
提示：要构建和测试正则表达式，您可以使用 RegEx 测试工具，例如 regex101。该工具不仅可以帮助您创建正则表达式，还可以帮助您学习它。
现在您了解了正则表达式的基础知识，让我们讨论如何在 JavaScript 代码中使用正则表达式。
JavaScript 正则表达式方法
如上所述，您可以使用 RegExp() 或正则表达式字面量在 JavaScript 中创建正则表达式。
const regex1 = /^ab/;
const regex2 = new Regexp('/^ab/');
在 JavaScript 中，可以将正则表达式与 RegExp() 方法一起使用，RegExp() 方法包括 test() 和 exec()。
还有一些字符串方法允许您将正则表达式作为其参数传递。它们是：match()，replace()，search() 和 split()。
| 方法 | 描述 |
|---|---|
| exec() | 在字符串中执行匹配项搜索并返回信息数组。不匹配时返回 null。 |
| test() | 测试字符串的匹配并返回真或假。 |
| match() | 返回一个包含所有匹配项的数组。不匹配时返回 null。 |
| matchAll() | 返回包含所有匹配项的迭代器。 |
| search() | 测试字符串中的匹配并返回匹配的索引。如果搜索失败，则返回 -1。 |
| replace() | 在字符串中搜索匹配项并将匹配的子字符串替换为子字符串。 |
| split() | 将字符串分解为子字符串数组。 |
示例 1：正则表达式
const string = 'Find me';
const pattern = /me/;
// search if the pattern is in string variable
const result1 = string.search(pattern);
console.log(result1); // 5
// replace the character with another character
const string1 = 'Find me';
string1.replace(pattern, 'found you'); // Find found you
// splitting strings into array elements
const regex1 = /[\s,]+/;
const result2 = 'Hello world! '.split(regex1);
console.log(result2); // ['Hello', 'world!', '']
// searching the phone number pattern
const regex2 = /(\d{3})\D(\d{3})-(\d{4})/g;
const result3 = regex2.exec('My phone number is: 555 123-4567.');
console.log(result3); // ["555 123-4567", "555", "123", "4567"]
正则表达式标志
标志与允许各种选项的正则表达式一起使用，例如全局搜索、不区分大小写的搜索等。它们可以单独使用，也可以一起使用。
| 标志 | 描述 |
|---|---|
| g | 执行全局匹配（查找所有匹配项） |
| m | 执行多行匹配 |
| i | 执行不区分大小写的匹配 |
示例 2：正则表达式修饰符
const string = 'Hello hello hello';
// performing a replacement
const result1 = string.replace(/hello/, 'world');
console.log(result1); // Hello world hello
// performing global replacement
const result2 = string.replace(/hello/g, 'world');
console.log(result2); // Hello world world
// performing case-insensitive replacement
const result3 = string.replace(/hello/i, 'world');
console.log(result3); // world hello hello
// performing global case-insensitive replacement
const result4 = string.replace(/hello/gi, 'world');
console.log(result4); // world world world
示例 3：验证电话号码
// program to validate the phone number
function validatePhone(num) {
// regex pattern for phone number
const re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/g;
// check if the phone number is valid
let result = num.match(re);
if (result) {
console.log('The number is valid.');
}
else {
let num = prompt('Enter number in XXX-XXX-XXXX format:');
validatePhone(num);
}
}
// take input
let number = prompt('Enter a number XXX-XXX-XXXX');
validatePhone(number);
输出
Enter a number XXX-XXX-XXXX: 2343223432
Enter number in XXX-XXX-XXXX format: 234-322-3432
The number is valid
示例 4：验证电子邮件地址
// program to validate the email address
function validateEmail(email) {
// regex pattern for email
const re = /\S+@\S+\.\S+/g;
// check if the email is valid
let result = re.test(email);
if (result) {
console.log('The email is valid.');
}
else {
let newEmail = prompt('Enter a valid email:');
validateEmail(newEmail);
}
}
// take input
let email = prompt('Enter an email: ');
validateEmail(email);
输出
Enter an email: hellohello
Enter a valid email: learningJS@gmail.com
The email is valid.
上一教程 ：JS Generators 下一教程 ：JS Debugging
参考文档
[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/regex
扫一扫
5560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
