跳到主要内容

JavaScript 正则表达式基础

什么是正则表达式？​

正则表达式（Regular Expression，简称 RegExp）是一种强大的文本模式匹配工具，用于在字符串中搜索、匹配和替换文本。它使用特定的语法规则来定义字符模式，能够高效地处理各种文本操作任务。

在JavaScript中，正则表达式是一种对象，可以用于执行模式匹配、搜索和替换等操作，尤其适合处理表单验证、数据提取和字符串操作等场景。

提示

正则表达式初看可能有些复杂，但掌握基础后，它会成为处理文本的强大工具！

创建正则表达式​

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

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

这是最常用的方法，使用斜杠(/)包围模式：

javascript
const regex = /pattern/flags;

例如：

javascript
const regex = /hello/i; // 匹配"hello"，不区分大小写

2. 使用RegExp构造函数​

javascript
const regex = new RegExp('pattern', 'flags');

例如：

javascript
const regex = new RegExp('hello', 'i'); // 匹配"hello"，不区分大小写
备注

当正则表达式需要动态生成时，构造函数方式更为适合。

正则表达式的标志(flags)​

标志用于改变正则表达式的匹配行为：

标志描述
i忽略大小写
g全局匹配（查找所有匹配项而非在找到第一个后停止）
m多行匹配
s允许 . 匹配换行符
u使用unicode码点匹配
y执行"粘性"搜索，匹配从目标字符串的当前位置开始

示例：

javascript
// 全局搜索，不区分大小写
const regex = /javascript/gi;
const text = "JavaScript is amazing. I love javascript!";
const result = text.match(regex);
console.log(result); // 输出: ["JavaScript", "javascript"]

元字符和特殊字符​

正则表达式中的一些字符有特殊含义：

元字符描述
.匹配除换行符外的任意单个字符
\d匹配任意数字，等价于 [0-9]
\D匹配任意非数字字符，等价于 [^0-9]
\w匹配任意字母、数字或下划线，等价于 [A-Za-z0-9_]
\W匹配任意非字母、数字或下划线的字符
\s匹配任意空白字符（空格、制表符、换行符等）
\S匹配任意非空白字符
\b匹配单词边界
\B匹配非单词边界

示例：

javascript
// 匹配所有数字
const numbers = "Year: 2023, Price: $199.99";
const digitsRegex = /\d+/g; // 一个或多个数字
const result = numbers.match(digitsRegex);
console.log(result); // 输出: ["2023", "199", "99"]

// 匹配单词边界的"is"
const text = "This is an island with history.";
const boundaryRegex = /\bis\b/g;
const boundaryResult = text.match(boundaryRegex);
console.log(boundaryResult); // 输出: ["is"]

量词​

量词用于指定要匹配的字符或表达式的数量：

量词描述
*匹配前面的表达式0次或多次
+匹配前面的表达式1次或多次
?匹配前面的表达式0次或1次（使其可选）
{n}精确匹配前面的表达式n次
{n,}匹配前面的表达式至少n次
{n,m}匹配前面的表达式至少n次但不超过m次

示例：

javascript
// 匹配电话号码格式: XXX-XXX-XXXX
const phoneRegex = /\d{3}-\d{3}-\d{4}/;
console.log(phoneRegex.test("123-456-7890")); // 输出: true
console.log(phoneRegex.test("123-45-7890")); // 输出: false

// 匹配HTML标签
const htmlRegex = /<.+?>/g; // 非贪婪模式，匹配最短的符合条件的字符串
const html = "<p>This is a <strong>bold</strong> paragraph</p>";
console.log(html.match(htmlRegex)); // 输出: ["<p>", "<strong>", "</strong>", "</p>"]
警告

默认情况下，量词是"贪婪的"，会尽可能多地匹配字符。添加?可使量词变为"非贪婪"模式，尽可能少地匹配。

字符类​

字符类允许你定义一组字符中的任意一个进行匹配：

字符类描述
[abc]匹配a、b或c中的任意一个字符
[^abc]匹配除a、b或c以外的任意字符
[a-z]匹配a到z范围内的任意字符
[A-Z]匹配A到Z范围内的任意字符
[0-9]匹配0到9范围内的任意数字

示例：

javascript
// 匹配元音字母
const vowelRegex = /[aeiou]/gi;
const text = "Hello World";
console.log(text.match(vowelRegex)); // 输出: ["e", "o", "o"]

// 匹配非数字字符
const nonDigitRegex = /[^0-9]/g;
const code = "A1B2C3";
console.log(code.match(nonDigitRegex)); // 输出: ["A", "B", "C"]

分组和捕获​

圆括号()用于分组和捕获匹配的文本：

javascript
// 捕获并重组日期格式
const dateRegex = /(\d{2})-(\d{2})-(\d{4})/;
const date = "25-12-2023";
const newFormat = date.replace(dateRegex, "$3/$2/$1");
console.log(newFormat); // 输出: "2023/12/25"

// 使用命名捕获组（ES2018+）
const dateRegexNamed = /(?<day>\d{2})-(?<month>\d{2})-(?<year>\d{4})/;
const dateMatch = "25-12-2023".match(dateRegexNamed);
console.log(dateMatch.groups); // 输出: {day: "25", month: "12", year: "2023"}

正则表达式方法​

JavaScript中处理正则表达式的常用方法：

String对象方法​

1. match()​

查找字符串中匹配正则表达式的部分：

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

2. replace()​

替换匹配的文本：

javascript
const text = "John Smith";
const newText = text.replace(/(\w+)\s(\w+)/, "$2, $1");
console.log(newText); // 输出: "Smith, John"

返回匹配位置的索引：

javascript
const text = "Visit Microsoft!";
const position = text.search(/Microsoft/i);
console.log(position); // 输出: 6

4. split()​

使用正则表达式分割字符串：

javascript
const text = "How are you doing today?";
const words = text.split(/\s+/);
console.log(words); // 输出: ["How", "are", "you", "doing", "today?"]

RegExp对象方法​

1. test()​

检测字符串是否匹配正则表达式，返回true或false：

javascript
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test("user@example.com")); // 输出: true
console.log(emailRegex.test("invalid-email")); // 输出: false

2. exec()​

执行搜索匹配，返回详细信息：

javascript
const regex = /(\d{2})-(\d{2})-(\d{4})/;
const result = regex.exec("25-12-2023");
console.log(result[0]); // 完整匹配: "25-12-2023"
console.log(result[1]); // 第一个捕获组: "25"
console.log(result[2]); // 第二个捕获组: "12"
console.log(result[3]); // 第三个捕获组: "2023"

常见应用场景​

1. 表单验证​

javascript
// 电子邮件验证
function validateEmail(email) {
  const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return regex.test(email);
}

console.log(validateEmail("user@example.com")); // 输出: true
console.log(validateEmail("invalid-email")); // 输出: false

// 密码强度检查（至少8个字符，包含大小写字母和数字）
function checkPasswordStrength(password) {
  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
  return regex.test(password);
}

console.log(checkPasswordStrength("Abc12345")); // 输出: true
console.log(checkPasswordStrength("password")); // 输出: false

2. 数据提取​

javascript
// 从文本中提取所有URL
function extractUrls(text) {
  const urlRegex = /https?:\/\/[^\s]+/g;
  return text.match(urlRegex) || [];
}

const content = "Visit our website at https://example.com and https://blog.example.com";
console.log(extractUrls(content));
// 输出: ["https://example.com", "https://blog.example.com"]

3. 格式化数据​

javascript
// 将电话号码格式化为 (XXX) XXX-XXXX
function formatPhoneNumber(phoneNumber) {
  // 首先移除所有非数字字符
  const cleaned = phoneNumber.replace(/\D/g, '');
  // 然后应用新格式
  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
  
  if (match) {
    return `(${match[1]}) ${match[2]}-${match[3]}`;
  }
  
  return null;
}

console.log(formatPhoneNumber("1234567890")); // 输出: "(123) 456-7890"
console.log(formatPhoneNumber("123-456-7890")); // 输出: "(123) 456-7890"

正则表达式的注意事项​

  1. 性能考虑：复杂的正则表达式可能导致性能问题，特别是在处理大量文本时。
  2. 可读性：正则表达式可能难以阅读和维护，适当添加注释很重要。
  3. 贪婪匹配：默认情况下，量词是贪婪的，可能导致意外结果。
  4. 特殊字符转义：如果要匹配特殊字符(如*, ., +等)，需要使用反斜杠转义。
javascript
// 转义特殊字符的示例
const price = "$19.99";
const dollarRegex = /\$/; // 转义 $ 符号
console.log(dollarRegex.test(price)); // 输出: true

// 匹配包含小数点的数字
const numberRegex = /\d+\.\d+/;
console.log(numberRegex.test("19.99")); // 输出: true

总结​

正则表达式是处理字符串的强大工具，能够帮助我们高效地完成各种文本匹配、查找和替换任务。本文介绍了JavaScript中正则表达式的基础知识，包括：

  • 创建正则表达式的两种方法
  • 各种标志及其作用
  • 元字符、特殊字符和字符类
  • 量词和分组
  • 正则表达式相关的方法
  • 常见应用场景

掌握这些基础知识后，你就能够应对大多数文本处理需求，并逐步构建更复杂的正则表达式模式。

练习题​

  1. 编写一个正则表达式来验证用户名（只允许字母、数字和下划线，长度为5-20个字符）
  2. 创建一个正则表达式来匹配所有HTML标签
  3. 编写一个函数，使用正则表达式从文本中提取所有的日期（格式为MM/DD/YYYY或MM-DD-YYYY）
  4. 使用正则表达式验证IP地址格式是否正确

进一步学习资源​

记住，正则表达式的掌握需要实践和耐心。从简单模式开始，逐步构建更复杂的表达式，最终你将能够轻松处理各种文本匹配和操作任务。