JS正则表达式用法大全与技巧总结 – wiki基地

作者： /

由于当前环境限制无法直接创建文件，我将直接在此处为你列出《JS正则表达式用法大全与技巧总结》的文章内容。你可以将其复制保存为 JS_Regex_Summary.md。

JS正则表达式用法大全与技巧总结

正则表达式（Regular Expression）是处理字符串的强大工具。在 JavaScript 中，正则表达式的使用非常广泛，从简单的表单验证到复杂的文本解析都能看到它的身影。

1. 创建正则表达式

在 JS 中有两种创建方式：

1.1 字面量（Literal）

推荐用于模式固定的场景，性能更好。
javascript
const regex = /pattern/flags;
// 示例：匹配 3 个数字
const r = /\d{3}/g;

1.2 构造函数（Constructor）

用于需要动态生成正则模式的场景。
javascript
const pattern = "\\d{3}"; // 注意反斜杠需要转义
const regex = new RegExp(pattern, "g");

2. 修饰符（Flags）

标志 描述
g Global：全局匹配，找到所有匹配，而不是在第一个匹配后停止。
i Ignore Case：忽略大小写。
m Multiline：多行匹配，让 ^ and $ 匹配每一行的开始和结束。
s DotAll：允许 . 匹配换行符。
u Unicode：开启 Unicode 匹配模式（处理中文或 Emoji 时很重要）。
y Sticky：粘连匹配，仅从 lastIndex 开始匹配。

3. 核心语法速查

3.1 字符类

  • .: 匹配除换行符外的任意字符 (加 s flag 后可匹配换行)。
  • \d / \D: 数字 [0-9] / 非数字。
  • \w / \W: 单词字符 [A-Za-z0-9_] / 非单词字符。
  • \s / \S: 空白符（空格、制表符、换行等） / 非空白符。
  • [...]: 字符集合，如 [a-z]。
  • [^...]: 反向字符集合，如 [^0-9] (非数字)。

3.2 量词（Quantifiers）

  • *: 0 次或多次。
  • +: 1 次或多次。
  • ?: 0 次或 1 次。
  • {n}: 精确 n 次。
  • {n,}: 至少 n 次。
  • {n,m}: n 到 m 次。

3.3 边界断言

  • ^: 字符串开始。
  • $: 字符串结束。
  • \b: 单词边界 (Word Boundary)。
  • \B: 非单词边界。

4. 高级用法

4.1 分组与捕获

  • (abc): 捕获组。匹配并记住匹配项，可通过 $1, $2 或 match 结果访问。
  • (?:abc): 非捕获组。只匹配不记住，用于逻辑分组（比如 (?:ab)+）。

4.2 命名捕获组 (ES2018)

给捕获组起名字，使代码更易读。
javascript
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = re.exec('2025-12-19');
console.log(match.groups.year); // "2025"

4.3 零宽断言 (Lookaround)

不消耗字符，只进行位置判断。
– (?=...): 正向先行断言 (Lookahead)。后面必须是…
– 示例：\d+(?=元) 匹配”100元”中的”100″。
– (?!...): 负向先行断言 (Negative Lookahead)。后面不能是…
– (?<=...): 正向后行断言 (Lookbehind) [ES2018]。前面必须是…
– (?<!...): 负向后行断言 (Negative Lookbehind) [ES2018]。前面不能是…

5. 常用方法技巧

5.1 RegExp 对象方法

  • regex.test(str): 返回 true/false。验证场景首选。
    javascript
    /^\d+$/.test("123"); // true
  • regex.exec(str): 返回详细匹配数组或 null。用于逐个遍历匹配。

5.2 String 对象方法

  • str.match(regex):
    • 无 g: 返回第一个匹配及捕获组信息。
    • 有 g: 返回所有匹配字符串数组（无捕获组信息）。
  • str.matchAll(regex) (ES2020): 返回迭代器，包含所有全局匹配的详细信息（即使有 g 也能获取捕获组）。
  • str.search(regex): 返回索引，找不到返回 -1。
  • str.replace(regex, replacement): 强大的替换功能。
    javascript
    // 技巧：使用函数作为替换参数处理复杂逻辑
    "hello world".replace(/\w+/g, (word) => word.toUpperCase());
    // 结果: "HELLO WORLD"
  • str.split(regex): 按照正则分割字符串。

6. 实战技巧与避坑指南

6.1 贪婪 vs 懒惰 (Greedy vs Lazy)

量词默认是贪婪的（尽可能多匹配）。在量词后加 ? 变为懒惰匹配（尽可能少匹配）。
– 字符串: <div>content</div>
– /<.+>/: 匹配 <div>content</div> (贪婪)
– /<.+?>/: 匹配 <div> (懒惰)

6.2 常见模式片段

  • 千分位分隔符:
    javascript
    "1234567890".replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    // "1,234,567,890"
  • 去除首尾空格 (如果不使用 trim):
    javascript
    str.replace(/^\s+|\s+$/g, '');
  • 简单的 Email 验证:
    javascript
    /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/

6.3 性能优化建议

  1. 避免回溯陷阱 (Catastrophic Backtracking): 避免嵌套量词如 (a+)+，在处理长字符串时可能导致浏览器卡死。
  2. 预编译: 如果正则在循环中使用，不要在循环体内 new RegExp 或使用字面量，应在外部定义好。
  3. 使用具体字符类: 尽量用 [^"]* 代替 .* 来匹配引号内容，效率更高且更安全。

希望这篇文章对你有帮助！如有具体的正则匹配需求，欢迎继续提问。

滚动至顶部