前端必备：正则表达式入门指南与高频场景实战

正则表达式是处理文本的瑞士军刀，但对于新手来说可能有些复杂。本文通过通俗易懂的讲解和实用案例，带你快速上手！

一、正则表达式基础组成

1. 修饰符（Flags）

修饰符放在正则表达式末尾（如 /pattern/igm），用于控制匹配模式：

修饰符	名称	作用
i	ignoreCase	忽略大小写（如匹配 "A" 和 "a"）
g	global	全局匹配（匹配所有结果，而非第一个）
m	multiline	多行模式（允许 ^ 和 $ 匹配行首行尾）

---

2. 核心元字符

元字符	名称/功能	示例
.	通配符（除换行符）	a.c 匹配 "abc"、"a@c"（任意单个字符）
\	转义符	\. 匹配句号（.本身） / \\ 匹配反斜杠
^	字符串起始	^Hello 匹配以 "Hello" 开头的字符串
$	字符串结束	end$ 匹配以 "end" 结尾的字符串
|	逻辑或	cat|dog 匹配 "cat" 或 "dog"

---

3. 量词（Quantifiers）

量词	含义	示例
{n}	匹配正好 n 次	/\d{4}/ 匹配4位数字
{n,}	匹配至少 n 次	/\w{3,}/ 匹配至少3位的字母/数字
{n,m}	匹配n 到 m 次	/[a-z]{2,5}/ 匹配2-5位小写字母
?	匹配0 或 1 次（可选）	/colou?r/ 匹配 "color" 或 "colour"
*	匹配0 次或多次	/\d*/ 匹配连续数字（包括空字符串）
+	匹配1 次或多次	/\d+/ 匹配至少1位数字

---

4. 字符集（Character Sets）

用 [] 定义匹配范围，常用规则：

表达式	含义	示例
[abc]	匹配 a、b、c 中的任意一个字符	/[aeiou]/ 匹配元音字母
[^abc]	匹配非 a、b、c 的任意字符	/[^0-9]/ 匹配非数字字符
[a-z]	匹配小写字母 a 到 z	/[a-z]/ 匹配任意小写字母
[A-Z0-9]	匹配大写字母 A-Z 或数字 0-9	/[A-Z0-9]/ 匹配大写字母或数字

---

5. 字符匹配

元字符	含义	等价写法
\d	匹配数字	[0-9]
\D	匹配非数字	[^0-9]
\w	匹配字母、数字、下划线	[A-Za-z0-9_]
\W	匹配非字母/数字/下划线	[^\w]
\s	匹配空格、制表符等空白符	-
\S	匹配非空白符	[^\s]

---

6. 边界与位置

元字符	含义	示例说明
\b	单词边界（字母与非字母之间）	\bno\b 匹配 "no" in "no way"，不匹配 "now"
\B	非单词边界	\Bend\B 匹配 "end" in "bending"

---

7. 分组与断言

(1) 分组

表达式	作用
(abc)	捕获分组（可提取匹配内容）
(?:abc)	非捕获分组（不提取内容）

(2) 断言

表达式	作用	示例
x(?=y)	匹配后面跟着 y 的 x	/a(?=b)/ 匹配后面有 b 的 a
x(?!y)	匹配后面不跟 y 的 x	/a(?!b)/ 匹配后面没有 b 的 a

---

8. 特殊空白字符元字符

元字符	名称	功能描述	示例说明
\t	水平制表符（Tab）	匹配一个制表符（通常等价于4个空格）	/\t/ 匹配文本中的 Tab 键产生的缩进
\n	换行符（Newline）	匹配换行符（Unix/Linux 系统换行符）	/a\nb/ 匹配 "a" 后换行再跟 "b" 的文本（如 a↵b）
\r	回车符（Carriage Return）	匹配回车符（旧版 Mac 系统换行符）	/\r/ 匹配回车符（Windows 换行符是 \r\n，Unix 是 \n，旧 Mac 是 \r）

二、高频实战场景

1. 验证是否为有效数字

// 规则：验证是否为有效数字  
const reg=/^[+-]?(0|([1-9]\d+))(\.\d+)?$/;

reg.test('13812345678'); // true  
reg.test('abcdefg'); // false 

2. 验证真实姓名

//Tips：汉字/^[\u4E00-\u9FA5]$/
const reg=/^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;

reg.test('1234'); // false
reg.test('csdn'); // false
reg.test('今天你也要快乐呀'); // true

3. 验证身份证号码

const reg=/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{2})(\d)(\d|X)$/;
// 或
const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

4. 验证密码强度

//最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
const reg=/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

5. 验证邮箱

//yourname：任意英文字母（a-z/A-Z）、数字（0-9）、下划线（_）、英文句点（.）、连字符（-），长度大于0：/[a-z\d._-]+/
//domain：任意英文字母（a-z/A-Z）、数字（0-9）、连字符（-），长度大于0：/[a-z\d-]+/
//extension：任意英文字母（a-z/A-Z），长度2-8：/[a-z]{2,8}/
//optional-extension："."开头，后面跟任意英文字母（a-z/A-Z），长度2-8，可选： /(\.[a-z]{2,8})?/

const reg = /^([a-z\d._-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/
// 或者：
const reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

6. URL正则

const reg= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

7. 手机号

//以 1 开头：/^1/
//第2位为3、4、5、7、8中的一个：/[34578]/ 或 /(3|4|5|7|8)/
//剩余3-11位均为数字，并以数字结尾：/\d{9}$/
const reg= /^1[34578]\d{9}$/ ;

8. 验证qq号

const qqPattern = /^[1-9][0-9]{4,10}$/;

9. 验证qq号

//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
const wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;

10. 验证车牌号

const cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;

三、调试工具推荐

Regex101：可视化调试，支持语法高亮和解释
https://regex101.com

RegExr：实时测试，内置常用语法参考
https://regexr.com