跳到主要内容

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地址格式是否正确

进一步学习资源

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