跳到主要内容

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对象方法

  1. test() - 测试字符串是否匹配模式
javascript
const pattern = /hello/;
console.log(pattern.test("hello world")); // 输出: true
console.log(pattern.test("hi world")); // 输出: false
  1. 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对象中使用正则表达式的方法

  1. match() - 检索字符串与正则表达式的匹配项
javascript
const text = "The rain in Spain stays mainly in the plain";
console.log(text.match(/ain/g)); // 输出: ["ain", "ain", "ain"]
  1. search() - 查找与正则表达式匹配的第一个子字符串的位置
javascript
const text = "Hello world!";
console.log(text.search(/world/)); // 输出: 6
  1. replace() - 替换与正则表达式匹配的子字符串
javascript
const text = "Hello world!";
console.log(text.replace(/world/, "JavaScript")); // 输出: "Hello JavaScript!"
  1. 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的正则表达式是处理字符串的强大工具。本文介绍了:

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

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

警告

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

练习与深入学习

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

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

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