跳到主要内容

JS 正则表达式基础

正则表达式更适合“读懂和改造”，不适合死记硬背。前端里最常见的用途是输入校验、文本匹配、批量替换和内容提取。

先记住 4 个核心方法​

const reg = /foo/g;

reg.test('foobar');       // true / false
reg.exec('foobar foo');   // 返回匹配结果和索引
'foobar'.match(reg);      // 提取匹配结果
'foo-bar'.replace(/-/g, '_'); // 批量替换

常用元字符​

.      // 任意单个字符（默认不含换行）
\d     // 数字，等价于 [0-9]
\D     // 非数字
\w     // 字母、数字、下划线
\W     // 非单词字符
\s     // 空白字符
\S     // 非空白字符
^      // 开头
$      // 结尾

常用量词​

*      // 0 次或多次
+      // 1 次或多次
?      // 0 次或 1 次
{n}    // 恰好 n 次
{n,}   // 至少 n 次
{n,m}  // n 到 m 次

分组与选择​

(ab)+         // 分组
foo|bar       // 或
(\d{4})-(\d{2})-(\d{2}) // 捕获分组

前端里常见的写法​

1. 只允许英文字母​

const reg = /^[A-Za-z]+$/;

2. 只允许数字​

const reg = /^\d+$/;

3. 校验 6 位验证码​

const reg = /^\d{6}$/;

4. 去掉首尾空格​

const value = input.replace(/^\s+|\s+$/g, '');

5. 提取 URL 查询参数中的某个值​

const match = /[?&]id=([^&]+)/.exec('?id=123&name=torli');
console.log(match?.[1]); // 123

贪婪与非贪婪​

const text = '<div>hello</div><div>world</div>';

text.match(/<div>.*<\/div>/);   // 贪婪，尽量多吃
text.match(/<div>.*?<\/div>/);  // 非贪婪，尽量少吃

在处理 HTML 片段、模板字符串时，这个区别很常见。

使用建议​

  • 规则复杂时，优先拆成几段小正则，不要一条表达式塞满所有逻辑
  • 做业务校验时，正则只负责“格式”，真正的业务约束还要靠代码补充
  • 能用 URLSearchParams、字符串方法解决的问题，不一定非要上正则