JavaScript 正则表达式模式
什么是正则表达式？
正则表达式（Regular Expression，简称 RegExp）是一种用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式是一个对象，可以用于执行强大的模式匹配和"搜索并替换"功能。
正则表达式的主要用途包括：
- 验证输入（如表单验证）
- 搜索字符串中的特定模式
- 替换字符串中的部分内容
- 从字符串中提取信息
提示
掌握正则表达式可以大大提高您处理文本和字符串的效率！
创建正则表达式
在JavaScript中，有两种方式可以创建正则表达式：
1. 使用正则表达式字面量
javascript
let pattern = /pattern/flags;
2. 使用RegExp构造函数
javascript
let pattern = new RegExp('pattern', 'flags');
例如，创建一个匹配所有数字的正则表达式：
javascript
// 使用字面量
const digitPattern1 = /\d+/;
// 使用构造函数
const digitPattern2 = new RegExp('\\d+');
// 测试
console.log(digitPattern1.test("123")); // 输出: true
console.log(digitPattern2.test("abc")); // 输出: false
备注
使用构造函数时，需要注意转义字符问题。由于构造函数参数是字符串，所以像 \d 这样的特殊字符需要双重转义：\\d。
正则表达式模式语法
基本匹配
最简单的正则表达式是直接匹配字符：
javascript
const pattern = /hello/;
console.log(pattern.test("hello world")); // 输出: true
console.log(pattern.test("hi there")); // 输出: false
特殊字符
正则表达式中的许多字符具有特殊含义：
| 字符 | 描述 |
|---|---|
. | 匹配任何单个字符（除了换行符） |
\d | 匹配任何数字字符 (等同于 [0-9]) |
\D | 匹配任何非数字字符 (等同于 [^0-9]) |
\w | 匹配任何字母、数字或下划线 (等同于 [A-Za-z0-9_]) |
\W | 匹配任何非字母、数字或下划线 (等同于 [^A-Za-z0-9_]) |
\s | 匹配任何空白字符 (空格、制表符、换行符等) |
\S | 匹配任何非空白字符 |
\b | 匹配单词边界 |
\B | 匹配非单词边界 |
示例：
javascript
const digitPattern = /\d{3}/; // 匹配连续的3个数字
console.log(digitPattern.test("123")); // 输出: true
console.log(digitPattern.test("12")); // 输出: false
console.log(digitPattern.test("abc123def")); // 输出: true
字符类
字符类允许您指定一组要匹配的字符：
javascript
const vowelPattern = /[aeiou]/i; // i标志表示不区分大小写
console.log(vowelPattern.test("Apple")); // 输出: true
console.log(vowelPattern.test("sky")); // 输出: false
字符类中的连字符-用于表示范围：
javascript
const alphaPattern = /[a-z]/; // 匹配任何小写字母
console.log(alphaPattern.test("Hello")); // 输出: true
console.log(alphaPattern.test("123")); // 输出: false
^在字符类中表示否定：
javascript
const notDigitPattern = /[^0-9]/; // 匹配任何非数字字符
console.log(notDigitPattern.test("123")); // 输出: false
console.log(notDigitPattern.test("a123")); // 输出: true
量词
量词指定模式应该匹配多少次：
| 量词 | 描述 |
|---|---|
* | 匹配前面的表达式0次或多次 |
+ | 匹配前面的表达式1次或多次 |
? | 匹配前面的表达式0次或1次 |
{n} | 精确匹配n次 |
{n,} | 至少匹配n次 |
{n,m} | 匹配n到m次 |
示例：
javascript
console.log(/\d+/.test("123")); // 输出: true (1个或多个数字)
console.log(/\d+/.test("abc")); // 输出: false (没有数字)
console.log(/colou?r/.test("color")); // 输出: true (u是可选的)
console.log(/colou?r/.test("colour")); // 输出: true (u是可选的)
console.log(/\d{2,4}/.test("123")); // 输出: true (2-4个数字)
console.log(/\d{2,4}/.test("1")); // 输出: false (少于2个数字)
边界匹配
边界匹配器可以指定字符串的开始、结束或单词边界：
^- 匹配字符串的开始$- 匹配字符串的结束\b- 匹配单词边界\B- 匹配非单词边界
javascript
console.log(/^hello/.test("hello world")); // 输出: true (以hello开头)
console.log(/^hello/.test("say hello")); // 输出: false (不以hello开头)
console.log(/world$/.test("hello world")); // 输出: true (以world结尾)
console.log(/world$/.test("world tour")); // 输出: false (不以world结尾)
console.log(/\bcat\b/.test("the cat sat")); // 输出: true (cat是一个独立的单词)
console.log(/\bcat\b/.test("category")); // 输出: false (cat不是独立的单词)
分组和捕获
用括号 () 可以创建捕获组，以便后续引用：
javascript
const phonePattern = /(\d{3})-(\d{3})-(\d{4})/;
const phoneNumber = "123-456-7890";
const matches = phoneNumber.match(phonePattern);
console.log(matches[0]); // 输出整个匹配: "123-456-7890"
console.log(matches[1]); // 输出第一个捕获组: "123"
console.log(matches[2]); // 输出第二个捕获组: "456"
console.log(matches[3]); // 输出第三个捕获组: "7890"
选择符
使用 | 符号可以创建选择（或）操作：
javascript
const fruitPattern = /apple|banana|orange/;
console.log(fruitPattern.test("I like apple")); // 输出: true
console.log(fruitPattern.test("I like pear")); // 输出: false
正则表达式标志
JavaScript的正则表达式支持以下标志：
g- 全局匹配（查找所有匹配项，而不是在找到第一个匹配项时停止）i- 不区分大小写m- 多行匹配s- dotAll模式（允许.匹配换行符）u- 启用Unicode支持y- 粘性匹配
javascript
// 全局匹配
const text = "apple, banana, apple, orange";
console.log(text.match(/apple/)); // 输出: ["apple"]
console.log(text.match(/apple/g)); // 输出: ["apple", "apple"]
// 不区分大小写
console.log(/javascript/i.test("JavaScript")); // 输出: true
// 多行匹配
const multiLine = `First line
Second line`;
console.log(/^Second/.test(multiLine)); // 输出: false
console.log(/^Second/m.test(multiLine)); // 输出: true
正则表达式方法
JavaScript中与正则表达式相关的主要方法包括：
RegExp对象方法
- test() - 测试字符串是否匹配模式
javascript
const pattern = /hello/;
console.log(pattern.test("hello world")); // 输出: true
console.log(pattern.test("hi world")); // 输出: false
- exec() - 执行搜索匹配
javascript
const pattern = /(\w+)\s(\w+)/;
const result = pattern.exec("John Doe");
console.log(result[0]); // 输出: "John Doe"
console.log(result[1]); // 输出: "John"
console.log(result[2]); // 输出: "Doe"
String对象中使用正则表达式的方法
- match() - 检索字符串与正则表达式的匹配项
javascript
const text = "The rain in Spain stays mainly in the plain";
console.log(text.match(/ain/g)); // 输出: ["ain", "ain", "ain"]
- search() - 查找与正则表达式匹配的第一个子字符串的位置
javascript
const text = "Hello world!";
console.log(text.search(/world/)); // 输出: 6
- replace() - 替换与正则表达式匹配的子字符串
javascript
const text = "Hello world!";
console.log(text.replace(/world/, "JavaScript")); // 输出: "Hello JavaScript!"
- split() - 使用正则表达式来分割字符串
javascript
const text = "apple,banana;orange|grape";
console.log(text.split(/[,;|]/)); // 输出: ["apple", "banana", "orange", "grape"]
实际应用案例
案例1: 表单验证
验证邮箱地址格式：
javascript
function validateEmail(email) {
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailPattern.test(email);
}
console.log(validateEmail("user@example.com")); // 输出: true
console.log(validateEmail("invalid-email")); // 输出: false
案例2: 解析URL
从URL中提取不同部分：
javascript
function parseURL(url) {
const urlPattern = /^(https?):\/\/(www\.)?([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})\/?(.*)?$/;
const match = url.match(urlPattern);
if (match) {
return {
protocol: match[1],
domain: match[3],
tld: match[4],
path: match[5] || ""
};
}
return null;
}
console.log(parseURL("https://www.example.com/path/to/resource"));
// 输出: {protocol: "https", domain: "example", tld: "com", path: "path/to/resource"}
案例3: 格式化文本
将文本中的日期格式标准化：
javascript
function standardizeDates(text) {
// 转换格式如 DD/MM/YYYY 到 YYYY-MM-DD
return text.replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})/g, '$3-$2-$1');
}
const text = "Meeting scheduled on 15/07/2023 and follow-up on 20/07/2023.";
console.log(standardizeDates(text));
// 输出: "Meeting scheduled on 2023-07-15 and follow-up on 2023-07-20."
案例4: 词语计数
统计文本中特定单词出现的次数：
javascript
function countWord(text, word) {
const regex = new RegExp(`\\b${word}\\b`, 'gi');
const matches = text.match(regex);
return matches ? matches.length : 0;
}
const paragraph = "JavaScript is amazing. I love JavaScript. JavaScript is fun.";
console.log(countWord(paragraph, "JavaScript")); // 输出: 3
总结
JavaScript的正则表达式是处理字符串的强大工具。本文介绍了：
- 正则表达式的基本语法和创建方法
- 特殊字符、字符类和量词
- 分组、捕获和边界匹配
- 正则表达式标志和方法
- 实际应用案例
通过掌握正则表达式，你可以更高效地处理文本验证、提取、搜索和替换任务。
警告
正则表达式功能强大但语法复杂，初学者可能需要时间适应。建议从简单模式开始，逐步掌握更复杂的用法。
练习与深入学习
要巩固你的正则表达式知识，可以尝试以下练习：
- 创建一个验证密码强度的正则表达式（至少8个字符，包含大小写字母、数字和特殊字符）
- 编写一个函数，识别并高亮文本中的所有URL
- 创建一个正则表达式，匹配有效的十六进制颜色代码（如 #FFF 或 #FF00AA）
有关正则表达式的更多信息，可以参考：
- MDN Web文档上的正则表达式指南
- 在线正则表达式测试工具如regex101.com