苟新节

主题

 

正则表达式 ​

更新: 9/11/2026字数: 0 字 时长: 0 分钟

正则表达式（Regular Expression，简称 Regex）是一种用来匹配、查找、替换文本的字符串模式（Pattern）。在前端开发中，正则表达式广泛用于表单验证（如邮箱/手机号）、文本提取和字符串替换。

一、 核心语法与元字符速查 ​

正则表达式由字符（Character）和元字符（Meta-character）组成。

1. 字符类与量词 ​

语法含义示例与匹配说明
[abc]匹配方括号内的任意一个字符[abc] 匹配 "a", "b", "c"
[^abc]匹配不在方括号内的任意字符[^abc] 匹配除 "a", "b", "c" 外的任何字符
[0-9] / [a-z]匹配指定范围内的字符[0-9] 匹配任意数字
.匹配除换行符以外的任意单个字符a.c 匹配 "abc", "a1c"
*匹配前面的元素 0 次或多次ab*c 匹配 "ac", "abc", "abbbc"
+匹配前面的元素 1 次或多次ab+c 匹配 "abc", "abbbc"（不匹配 "ac"）
?匹配前面的元素 0 次或 1 次colou?r 匹配 "color" 和 "colour"
{n,m}匹配前面的元素 n 到 m 次a{2,4} 匹配 "aa", "aaa", "aaaa"

2. 预定义元字符（简写类） ​

简写等价表示含义
\d[0-9]匹配数字（Digit）
\D[^0-9]匹配非数字
\w[a-zA-Z0-9_]匹配字母、数字、下划线（Word）
\W[^a-zA-Z0-9_]匹配非单词字符
\s[\r\n\t\f\v ]匹配空白字符（Space/Tab/换行）

3. 边界断言与修饰符 ​

  • 边界修饰符：

  • ^：匹配字符串的开头（如 ^abc 表示必须以 abc 开头）。

  • $：匹配字符串的结尾（如 abc$ 表示必须以 abc 结尾）。

  • 模式修饰符（Flags）：

  • g：全局匹配（Global），查找所有匹配项而非在首个停止。

  • i：忽略大小写（Case-insensitive）。

  • m：多行匹配（Multiline）。

二、 JS 中正则表达式的使用方式 ​

JavaScript 中可以通过两种方式创建正则表达式：

1. RegExp API（test / exec） ​

javascript
const regex = /^1[3-9]\d{9}$/; // 匹配中国大陆 11 位手机号

// 1. test()：判断是否匹配，返回 true / false
console.log(regex.test('13800138000')); // true
console.log(regex.test('12345678900')); // false

// 2. exec()：检索字符串中正则表达式的匹配，返回匹配数组或 null
const match = /(\d{4})-(\d{2})-(\d{2})/.exec('今天是 2026-09-10');
console.log(match[0]); // "2026-09-10" (完整匹配)
console.log(match[1]); // "2026" (捕获组 1)

2. String API（replace / match / split） ​

javascript
// 字符串替换
const str = '2026-09-10';
const formatted = str.replace(/-/g, '/'); // "2026/09/10"

// 提取所有数字
const text = '苹果 5 个，香蕉 12 个';
console.log(text.match(/\d+/g)); // ["5", "12"]

三、 常用前端实战正则 ​

写正则的核心思路是拆解规则：

1. 简单邮箱验证 ​

  • 规则：用户名 + @ + 域名 + . + 后缀。
  • 正则：/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

2. 匹配 URL 协议与域名 ​

  • 正则：/^https?:\/\/[^\s/$.?#].[^\s]*$/i

3. 千位分隔符（数字格式化，如 1234567 → 1,234,567） ​

  • 正则：/\B(?=(\d{3})+(?!\d))/g
  • 代码：
javascript
'123456789'.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // "123,456,789"

四、 进阶与坑点避雷 ​

  1. 贪婪匹配与非贪婪匹配：
  • 默认是贪婪的（尽可能多地匹配）：/<.*>/ 匹配 "<div>hello</div>" 会匹配整串。
  • 量词后加 ? 开启非贪婪/惰性匹配：/<.*?>/ 仅匹配 <div>。
  1. 捕获组与非捕获组：
  • (x)：捕获组，记住匹配的文本并可以通过 $1, $2 引用。
  • (?:x)：非捕获组，仅作分组逻辑（如 /(?:https|http)/），不分配编号，提高性能。
  1. 回溯陷阱（灾难性回溯，Catastrophic Backtracking）：
  • 避免写出嵌套通配符（如 (a+)+$），在匹配不成功的长字符串时会导致 CPU 使用率达到 100%。