常用正则表达式解读——前端开发必备速查指南

什么是正则表达式？

正则表达式（Regular Expression，简称 Regex 或 RegExp）是一种用于匹配和处理文本的强大工具。它使用一种紧凑的、高度压缩的"脚本语言"来描述搜索模式，广泛应用于文本搜索、验证、替换等操作。正则表达式最早起源于 Unix 操作系统，自 1950 年代由数学家 Stephen Kleene 提出形式化理论以来，已经成为计算机科学中最基础也是最重要的工具之一。如今，几乎所有主流编程语言（JavaScript、Python、Java、C# 等）、文本编辑器（VS Code、Sublime Text）、命令行工具（grep、sed、awk）都支持正则表达式。

在 Web 开发中，正则表达式是字符串处理的利器。无论是表单验证、数据提取还是文本格式化，正则表达式都能以简洁的方式完成复杂的匹配任务。本文将结合 ToolYou 正则表达式测试工具的常用模式库，系统解读前端开发中最常用的正则表达式。

正则表达式基础语法

在深入具体模式之前，先了解正则表达式的核心语法元素：

元字符速查表

元字符	含义	示例	匹配结果
.	匹配除换行符外的任意单个字符	a.	ab, a1, a!
\d	匹配任意数字（等价于 [0-9]）	\d+	123, 4567
\w	匹配字母、数字或下划线	\w+	hello, user_1
\s	匹配空白字符（空格、Tab、换行）	\s+	" " (多个空格)
^	匹配字符串开头	^Hello	Hello world
$	匹配字符串结尾	world$	hello world
*	0 次或多次	ab*	a, ab, abb
+	1 次或多次	ab+	ab, abb, abbb
?	0 次或 1 次	ab?	a, ab
{n}	恰好 n 次	\d{3}	123
{n,m}	n 到 m 次	\d{2,4}	12, 123, 1234
[]	字符集合，匹配其中任一字符	[abc]	a, b, c
[^]	否定字符集合，匹配不在其中的字符	[^0-9]	a, b, c（非数字）
()	捕获组，将多个字符作为一个单元	(abc)+	abc, abcabc
|	交替，匹配左边或右边	cat|dog	cat 或 dog

量词的贪婪与非贪婪

正则表达式默认使用贪婪匹配，即尽可能多地匹配字符。在量词后添加 ? 可切换为非贪婪模式：

• 贪婪模式：.* 会匹配到字符串末尾
• 非贪婪模式：.*? 只匹配到满足条件的最短字符串

例如，正则 <.*> 对字符串 <div>hello</div> 会匹配整个字符串（贪婪），而 <.*?> 则分别匹配 <div> 和 </div>（非贪婪）。

正则标志（Flags）

标志	名称	作用
g	全局匹配	查找所有匹配项，而非仅第一个
i	忽略大小写	匹配时不区分大小写
m	多行模式	^ 和 $ 匹配每行的开头和结尾
s	单行模式	让 . 也能匹配换行符
u	Unicode 模式	正确处理 Unicode 字符，包括 emoji

常用正则表达式详解

以下正则表达式均来自 ToolYou 正则表达式测试工具 的内置常用模式库，每条都配有详细解读。

1. 邮箱地址验证

正则表达式：[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}

解读：

• [a-zA-Z0-9._%+-]+：匹配用户名部分，允许字母、数字、点、下划线、百分号、加号和减号
• @：匹配固定的 @ 符号
• [a-zA-Z0-9.-]+：匹配域名部分，允许字母、数字、点和减号
• \.[a-zA-Z]{2,}：匹配顶级域名，要求至少 2 个字母（如 .com、.org、.cn）

示例匹配：user@example.com、test.user@domain.org

注意事项：此正则覆盖了大多数常见邮箱格式，但不完全符合 RFC 5322 标准。对于严格的邮箱验证，建议使用专门的验证库。

2. 中国大陆手机号验证

正则表达式：1[3-9]\d{9}

解读：

• 1：手机号以数字 1 开头
• [3-9]：第二位是 3 到 9 之间的数字（排除了 1 和 2 开头的号段）
• \d{9}：后续 9 位任意数字

示例匹配：13812345678、18698765432

注意事项：中国手机号为 11 位数字，此正则验证了号段范围。如需更精确的验证，可以扩展为 1[3-9]\d{9}\b，添加单词边界以确保匹配完整的手机号。

3. 身份证号码验证

正则表达式：\d{17}[\dXx]|\d{15}

解读：

• \d{17}[\dXx]：18 位身份证号，前 17 位为数字，最后一位可以是数字或 X/x
• |：或者
• \d{15}：15 位旧版身份证号

示例匹配：110101199003074678、11010119900307467X

注意事项：此正则仅验证格式，不验证校验码是否正确。18 位身份证最后一位是校验码，可通过 ISO 7064:1983.MOD 11-2 算法验证。

4. URL 链接提取

正则表达式：https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)

解读：

• https?：匹配 http 或 https
• :\/\/：匹配 ://
• (www\.)?：可选的 www. 前缀
• [-a-zA-Z0-9@:%._\+~#=]{1,256}：匹配域名，最长 256 个字符
• \.[a-zA-Z0-9()]{1,6}：匹配顶级域名
• \b：单词边界
• ([-a-zA-Z0-9()@:%_\+.~#?&//=]*)：匹配路径和查询参数

示例匹配：https://www.example.com/path?query=1

注意事项：URL 解析是一个复杂任务，此正则可以提取大多数常见 URL，但对于特殊情况（如国际化域名、端口号等）可能不完全准确。建议使用专门的 URL 解析库进行复杂场景处理。

5. IP 地址验证

正则表达式：\b(?:\d{1,3}\.){3}\d{1,3}\b

解读：

• \b：单词边界，确保匹配完整的 IP 地址
• (?:\d{1,3}\.){3}：非捕获组，匹配 3 次"数字.数字"模式（如 192.168.1.）
• \d{1,3}：匹配最后一部分数字（0-255 范围内的任意值）
• \b：单词边界

示例匹配：192.168.1.1、10.0.0.1、255.255.255.255

注意事项：此正则仅验证格式，不验证每段是否在 0-255 范围内。精确的 IP 验证需要更复杂的正则或使用专门的验证函数。

6. 日期格式验证

正则表达式：\d{4}-\d{2}-\d{2}

解读：

• \d{4}：匹配 4 位数字（年份）
• -：匹配固定的连字符
• \d{2}：匹配 2 位数字（月份）
• -：匹配固定的连字符
• \d{2}：匹配 2 位数字（日期）

示例匹配：2024-01-15、1999-12-31

注意事项：此正则仅验证 YYYY-MM-DD 格式，不验证日期的合法性（如 2024-02-30 也会被匹配）。如需验证合法日期，建议结合 JavaScript 的 Date 对象进行二次验证。

7. 时间格式验证

正则表达式：\d{2}:\d{2}:\d{2}

解读：

• \d{2}：匹配 2 位数字（小时）
• :：匹配固定的冒号
• \d{2}：匹配 2 位数字（分钟）
• :：匹配固定的冒号
• \d{2}：匹配 2 位数字（秒）

示例匹配：14:30:00、08:05:30

注意事项：此正则会匹配任何 24 小时制的时间格式，但不验证合法性（如 25:99:99 也会被匹配）。

8. 中文字符匹配

正则表达式：[一-龥]

解读：

• [一-龥]：匹配 Unicode 编码在 U+4E00 到 U+9FA5 之间的字符，即常用汉字范围

示例匹配：中、文、测、试

注意事项：此正则仅覆盖基本汉字区，不包含生僻字、繁体字或扩展区字符。如需匹配所有汉字，可使用 [一-鿿㐀-䶿]。

9. HTML 标签匹配

正则表达式：<[^>]+>

解读：

• <：匹配开始的尖括号
• [^>]+：匹配一个或多个非 > 字符（标签内容）
• >：匹配结束的尖括号

示例匹配：<div>、<span class="test">、</a>

注意事项：用正则解析 HTML 是不推荐的，因为 HTML 结构可能非常复杂。此正则仅适用于简单的标签提取场景。对于复杂的 HTML 处理，应使用 DOM 解析器。

10. CSS 颜色值匹配

正则表达式：#([0-9a-fA-F]{3}){1,2}\b

解读：

• #：匹配井号
• ([0-9a-fA-F]{3}){1,2}：匹配 3 位或 6 位十六进制数字
• \b：单词边界

示例匹配：#fff、#ffffff、#3P6

注意事项：此正则可匹配 RGB 和 HEX 颜色值，但不包括 rgba()、hsl() 等函数格式。

11. 密码强度验证

正则表达式：^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$

解读：

• ^ 和 $：匹配整个字符串的开头和结尾
• (?=.*[a-z])：正向先行断言，确保包含小写字母
• (?=.*[A-Z])：正向先行断言，确保包含大写字母
• (?=.*\d)：正向先行断言，确保包含数字
• (?=.*[@$!%*?&])：正向先行断言，确保包含特殊字符
• [A-Za-z\d@$!%*?&]{8,}：匹配 8 位以上的字母、数字或特殊字符

示例匹配：Abc123!@、Test@1234

注意事项：正向先行断言（Lookahead）是正则的高级特性，用于检查后续字符是否满足条件而不消耗字符。此正则是强密码验证的经典实现。

12. 邮政编码验证

正则表达式：\b\d{6}\b

解读：

• \b：单词边界
• \d{6}：恰好 6 位数字
• \b：单词边界

示例匹配：100000、200000

注意事项：此正则适用于中国 6 位邮政编码格式。其他国家有不同的邮编格式，如美国的 5 位或 9 位格式。

13. 银行卡号验证

正则表达式：\b\d{16,19}\b

解读：

• \b：单词边界
• \d{16,19}：16 到 19 位数字

示例匹配：6222021234567890123

注意事项：银行卡号验证通常需要使用 Luhn 算法进行校验位验证。此正则仅验证格式，不适用于金融级的卡号验证。

14. Base64 编码验证

正则表达式：^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$

解读：

• ^ 和 $：匹配整个字符串
• (?:[A-Za-z0-9+/]{4})*：非捕获组，匹配 4 个 Base64 字符的任意倍数
• (?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?：可选的结尾部分，处理填充

示例匹配：SGVsbG8gV29ybGQ=、YWE=

注意事项：Base64 编码长度必须是 4 的倍数，不足时用 = 填充。此正则可以验证纯 Base64 字符串的格式正确性。

15. 车牌号码验证

正则表达式：[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]

解读：

• 第一位：省级简称（京、津、沪等 31 个省级行政区）
• 第二位：字母 A-Z（除 I、O 外，避免与数字混淆）
• 第三至六位：字母或数字（排除 I、O）
• 第七位：字母或特殊字符（挂、学、警、港澳等）

示例匹配：京A12345、沪AD123 警

注意事项：此正则是大陆普通车牌的简化版本，新能源车牌（6 位）和其他特殊车牌未完全覆盖。

进阶正则技巧

非捕获组

使用 (?:...) 代替 (...) 创建非捕获组。非捕获组不会保存匹配结果，可以提高性能并简化分组编号：

        

          javascript
          
        
        // 捕获组：(abc) 会被保存为 $1
/(abc)+/.exec('abcabc') // ['abcabc', 'abc']

// 非捕获组：(?:abc) 不会被保存
/(?:abc)+/.exec('abcabc') // ['abcabc']
      

零宽断言

零宽断言用于匹配位置而非字符本身：

• 正向先行断言 (?=...)：匹配后面是某模式的position
• 负向先行断言 (?!...)：匹配后面不是某模式的位置
• 正向后行断言 (?<=...)：匹配前面是某模式的位置
• 负向后行断言 (?<!...)：匹配前面不是某模式的位置

示例：提取引号内的内容

        

          javascript
          
        
        /"([^"]*)"/g.exec('"hello" world') // ['hello', 'hello']
      

反向引用

在正则表达式内部引用之前捕获组的内容：

        

          javascript
          
        
        // 验证重复单词
/\b(\w+)\s+\1\b/g.test('the the') // true
      

正则表达式调试建议

1. 分步构建

不要试图一次性写出完整的正则表达式。从简单模式开始，逐步添加复杂性，每添加一步就进行测试。

2. 使用测试工具

ToolYou 的 正则表达式测试工具 提供了实时匹配高亮、分组捕获详情和替换预览功能，非常适合调试正则表达式。

3. 注意转义

在 JavaScript 字符串中，反斜杠需要双重转义（\\d），而在正则字面量中只需一个（\d）：

        

          javascript
          
        
        // 字符串方式
new RegExp('\\d+')  // 正确

// 字面量方式
/\d+/  // 正确
      

4. 避免贪婪匹配陷阱

使用非贪婪模式或否定字符类来避免过度匹配：

        

          javascript
          
        
        // 避免此写法（贪婪匹配会匹配到最后一个 </div>）
/<div>.*<\/div>/

// 推荐此写法（非贪婪匹配）
/<div>.*?<\/div>/

// 或此写法（否定字符类）
/<div>[^<]*<\/div>/
      

5. 性能优化

• 对于重复使用的正则，考虑缓存 RegExp 对象
• 避免过多的嵌套量词（如 (a+)+）
• 使用非捕获组减少内存开销
• 对于复杂匹配，考虑分段验证而非单条正则

常见问题解答

Q: 如何判断正则表达式是否匹配成功？

A: 在 JavaScript 中，可以使用 RegExp.prototype.test() 方法返回布尔值，或使用 RegExp.prototype.match() 方法获取匹配结果数组。

Q: 正则表达式中的 \b 是什么？

A: \b 是单词边界，匹配单词字符（\w）和非单词字符之间的位置。例如 \bcat\b 会匹配 “cat” 但不会匹配 “category”。

Q: 为什么我的正则表达式在 JavaScript 中不工作？

A: 常见原因包括：1) 字符串中的反斜杠需要双重转义；2) 缺少必要的标志（如 g、i）；3) 锚点 ^ 和 $ 的使用不符合预期；4) 贪婪匹配导致过度匹配。

Q: 正则表达式可以解析 HTML 吗？

A: 不建议使用正则表达式解析 HTML。HTML 是上下文无关语法，正则只能处理正则语言。对于简单的提取任务可以使用，但对于复杂的 HTML 处理，应使用 DOM 解析器。

Q: 如何提高正则表达式的执行性能？

A: 1) 避免回溯爆炸，使用非贪婪模式和原子分组；2) 缓存复用的 RegExp 对象；3) 对于复杂模式考虑使用专门的解析库；4) 避免过长的正则表达式，可拆分为多个简单模式。

总结

正则表达式是文本处理的强大工具，掌握常用模式及其原理可以大幅提升开发效率。本文梳理了 15 种最常用的正则表达式，涵盖了邮箱验证、手机号验证、URL 提取、IP 地址验证等常见场景。

建议在实际开发中使用 ToolYou 的 正则表达式测试工具 进行实时调试，该工具提供了匹配高亮、分组详情和常用模式库，可以帮助您快速验证和优化正则表达式。记住，正则表达式并非万能，对于复杂的文本解析任务，考虑使用专门的解析库会更加可靠和高效。

💡 提示：ToolYou 还提供 JSON 格式化、Base64 编解码、URL 编解码等相关工具，欢迎访问体验！