JavaScript 正则表达式模式

什么是正则表达式？

正则表达式（Regular Expression，简称 RegExp）是一种用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式是一个对象，可以用于执行强大的模式匹配和"搜索并替换"功能。

正则表达式的主要用途包括：

• 验证输入（如表单验证）
• 搜索字符串中的特定模式
• 替换字符串中的部分内容
• 从字符串中提取信息

提示

掌握正则表达式可以大大提高您处理文本和字符串的效率！

创建正则表达式

在JavaScript中，有两种方式可以创建正则表达式：

1. 使用正则表达式字面量

let pattern = /pattern/flags;

2. 使用RegExp构造函数

let pattern = new RegExp('pattern', 'flags');

例如，创建一个匹配所有数字的正则表达式：

// 使用字面量
const digitPattern1 = /\d+/;

// 使用构造函数
const digitPattern2 = new RegExp('\\d+');

// 测试
console.log(digitPattern1.test("123")); // 输出: true
console.log(digitPattern2.test("abc")); // 输出: false

备注

使用构造函数时，需要注意转义字符问题。由于构造函数参数是字符串，所以像 \d 这样的特殊字符需要双重转义：\\d。

正则表达式模式语法

基本匹配

最简单的正则表达式是直接匹配字符：

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	匹配非单词边界

示例：

const digitPattern = /\d{3}/;  // 匹配连续的3个数字
console.log(digitPattern.test("123"));       // 输出: true
console.log(digitPattern.test("12"));        // 输出: false
console.log(digitPattern.test("abc123def")); // 输出: true

字符类

字符类允许您指定一组要匹配的字符：

const vowelPattern = /[aeiou]/i;  // i标志表示不区分大小写
console.log(vowelPattern.test("Apple"));  // 输出: true
console.log(vowelPattern.test("sky"));    // 输出: false

字符类中的连字符-用于表示范围：

const alphaPattern = /[a-z]/;  // 匹配任何小写字母
console.log(alphaPattern.test("Hello")); // 输出: true
console.log(alphaPattern.test("123"));   // 输出: false

^在字符类中表示否定：

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次

示例：

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 - 匹配非单词边界

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不是独立的单词)

分组和捕获

用括号 () 可以创建捕获组，以便后续引用：

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"

选择符

使用 | 符号可以创建选择（或）操作：

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 - 粘性匹配

// 全局匹配
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对象方法

1. test() - 测试字符串是否匹配模式

const pattern = /hello/;
console.log(pattern.test("hello world"));  // 输出: true
console.log(pattern.test("hi world"));     // 输出: false

2. exec() - 执行搜索匹配

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对象中使用正则表达式的方法

1. match() - 检索字符串与正则表达式的匹配项

const text = "The rain in Spain stays mainly in the plain";
console.log(text.match(/ain/g));  // 输出: ["ain", "ain", "ain"]

2. search() - 查找与正则表达式匹配的第一个子字符串的位置

const text = "Hello world!";
console.log(text.search(/world/));  // 输出: 6

3. replace() - 替换与正则表达式匹配的子字符串

const text = "Hello world!";
console.log(text.replace(/world/, "JavaScript"));  // 输出: "Hello JavaScript!"

4. split() - 使用正则表达式来分割字符串

const text = "apple,banana;orange|grape";
console.log(text.split(/[,;|]/));  // 输出: ["apple", "banana", "orange", "grape"]

实际应用案例

案例1: 表单验证

验证邮箱地址格式：

function validateEmail(email) {
  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return emailPattern.test(email);
}

console.log(validateEmail("[email protected]"));  // 输出: true
console.log(validateEmail("invalid-email"));     // 输出: false

案例2: 解析URL

从URL中提取不同部分：

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: 格式化文本

将文本中的日期格式标准化：

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: 词语计数

统计文本中特定单词出现的次数：

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的正则表达式是处理字符串的强大工具。本文介绍了：

• 正则表达式的基本语法和创建方法
• 特殊字符、字符类和量词
• 分组、捕获和边界匹配
• 正则表达式标志和方法
• 实际应用案例

通过掌握正则表达式，你可以更高效地处理文本验证、提取、搜索和替换任务。

警告

正则表达式功能强大但语法复杂，初学者可能需要时间适应。建议从简单模式开始，逐步掌握更复杂的用法。

练习与深入学习

要巩固你的正则表达式知识，可以尝试以下练习：

1. 创建一个验证密码强度的正则表达式（至少8个字符，包含大小写字母、数字和特殊字符）
2. 编写一个函数，识别并高亮文本中的所有URL
3. 创建一个正则表达式，匹配有效的十六进制颜色代码（如 #FFF 或 #FF00AA）

有关正则表达式的更多信息，可以参考：

• MDN Web文档上的正则表达式指南
• 在线正则表达式测试工具如regex101.com