正则表达式 - JavaScript 教程

讲解

正则表达式是描述文本模式的迷你语言，用于「查找、校验、提取、替换」字符串。创建方式两种：字面量 /pattern/flags（写死模式时用）和 new RegExp('pattern', 'flags')（模式来自变量时用）。常用标志：g 全局（找所有匹配而非第一个）、i 忽略大小写、m 多行（^ $ 匹配每行头尾）、u Unicode 模式。

模式语法的核心符号：字符类 \d（数字）\w（字母数字下划线）\s（空白）及其大写反义；[abc] 枚举、[^abc] 排除、[a-z] 范围；量词 *（0+）+（1+）?（0或1）{n,m}（范围），默认贪婪，加 ? 变懒惰（尽可能少匹配）；^ $ 锚定头尾；| 或；() 分组并捕获，(?:...) 非捕获分组；. 匹配任意字符（默认不含换行）。入门期记住「字符类 + 量词 + 分组」三板斧就能解决八成问题。

JavaScript 里的使用入口分两边：RegExp 的 test（是否匹配，返回布尔）、exec（返回匹配详情数组）；String 的 match/matchAll（取匹配结果）、replace/replaceAll（替换，支持 $1 引用捕获组、支持函数返回值）、split（按模式分割）、search。校验场景优先 test，提取场景用 matchAll（带 g 标志返回迭代器），替换场景用带函数的 replace 最灵活。

示例

// test：校验
const phoneRe = /^1\d{10}$/;
console.log('手机号校验：', phoneRe.test('13800138000'), phoneRe.test('123'));

// 字符类与量词
console.log('含数字：', /\d/.test('abc123'));
console.log('纯字母：', /^[a-zA-Z]+$/.test('Hello'));

// match 与捕获组
const dateRe = /(\d{4})-(\d{2})-(\d{2})/;
const m = '今天是 2026-08-09'.match(dateRe);
console.log('整体：', m[0], '年：', m[1], '月：', m[2], '日：', m[3]);

// matchAll：提取所有匹配
const text = '价格 19.9 元，运费 5 元，合计 24.9 元';
const prices = [...text.matchAll(/(\d+\.?\d*)\s*元/g)].map((x) => Number(x[1]));
console.log('所有金额：', prices);

// replace：$1 引用捕获组
console.log('脱敏：', '13800138000'.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2'));

// replace 函数版：对每个匹配做计算
console.log('金额翻倍：', text.replace(/(\d+\.?\d*)\s*元/g, (_, num) => Number(num) * 2 + ' 元'));

// 贪婪 vs 懒惰
console.log('贪婪：', '<b>a</b><b>b</b>'.match(/<b>.*<\/b>/)[0]);
console.log('懒惰：', '<b>a</b><b>b</b>'.match(/<b>.*?<\/b>/)[0]);

// split 与变量模式
console.log('多种分隔符：', 'a,b；c，d'.split(/[,，；]/));
const word = 'color';
console.log('动态模式：', new RegExp(word, 'i').test('COLOR'));

常见坑

忘记转义元字符：匹配句点、括号、加号本身要写 . ( +，/1.1/ 里的点是「任意字符」不是小数点。
lastIndex 状态坑：带 g 的正则对象反复调 test/exec 会从上次的 lastIndex 继续，表现时好时坏。校验场景别复用带 g 的正则，或改用 String.prototype.match。
贪婪匹配吞掉过多内容：.* 默认吃到最后一个可能位置，提取成对标记内容时换懒惰 .? 或用排除字符类 [^>]。
用正则解析 HTML/嵌套结构：正则无法理解嵌套，套就抓瞎。解析 HTML 用 DOMParser，正则只处理「平」的文本模式。

小结

正则 = 字符类 + 量词 + 分组 + 标志；test 校验、matchAll 提取、replace 替换；注意转义、贪婪与 lastIndex 三大坑。下一章处理日期与时间。