引入
正则表达式有哪些应用场景?
表单验证:验证用户输入的合法性(如邮箱、手机号、密码强度等)。
数据清洗与格式化:处理用户输入或外部数据,去除冗余信息或统一格式。
路由匹配:在 SPA(单页应用)中解析 URL 参数。
字符串替换与转换:动态替换文本或转换格式。
数据提取与解析:从日志、API 响应或用户输入中提取结构化数据。
国际化与本地化处理:处理不同国家的手机号、邮政编码等格式。
性能优化与安全防护:避免正则表达式漏洞或性能瓶颈。
创建正则表达式对象
JavaScript中使用RegExp对象来封装一个正则表达式,并提供相关的方法和属性。
两种创建方式:字面量、构造函数。
//字面量
let reg = /\bis\b/g; //g表示全文匹配
let str = "He is a boy. This is a dog. Where is she?";
console.log(str.replace(reg, "IS"));
//构造函数
let reg = new RegExp("\\bis\\b", "g");
let str = "He is a boy. This is a dog. Where is she?";
console.log(str.replace(reg, "IS"));
正则表达式字符与语法
原义文本字符,如:a,abc 等。
修饰符
g:全文搜索,若不添加,则搜索到第一个匹配即停止。
i:忽略大小写,正则表达式是区分大小写的。
m:多行搜索,搜索时识别换行符。
元字符
元字符,在正则表达式中有特殊意义的非字母字符。
元字符 | 说明 |
---|---|
. | 匹配任意单个字符 |
\ | 转义字符,将特殊字符转为普通字符 |
| | 逻辑或,匹配左右任意一个表达式 |
/gr.y/ // 匹配 "gray"、"grey"、"gr3y" 等
/a\|b/ // 匹配 "a" 或 "b"
元字符 | 说明 |
---|---|
* | 匹配前一个字符 0 次或多次(贪婪) |
+ | 匹配前一个字符 1 次或多次(贪婪) |
? | 匹配前一个字符 0 次或 1 次,或标记非贪婪模式 |
{n} | 匹配前一个字符 精确 n 次 |
{n,} | 匹配前一个字符 至少 n 次 |
{n,m} | 匹配前一个字符 n 到 m 次 |
贪婪模式
例如:\d{3,6}匹配"12345678"的结果是什么?默认情况下,正则 表达式会尽可能多的匹配,即用 6 次来匹配。
console.log("12345678".replace(/\d{3,6}/g, "x"));//x78
非贪婪模式
与贪婪模式相反,即尽可能少的匹配,一旦成功匹配就不再继续 尝试其他的可能性。在模式后面加上?。
console.log("12345678".replace(/\d{3,6}?/g, "x"));//xx78
元字符 | 说明 |
---|---|
^ | 匹配字符串的开头 |
$ | 匹配字符串的结尾 |
/b | 匹配单词边界 |
/B | 匹配非单词边界 |
/^Hello/ // 匹配以 "Hello" 开头的字符串
/world$/ // 匹配以 "world" 结尾的字符串
/\bcat\b/ // 匹配独立的单词 "cat"(不匹配 "category" 中的 "cat")
元字符 | 说明 |
---|---|
[...] | 字符集合,匹配方括号内的任意一个字符 |
[^...] | 否定字符集合,匹配不在方括号内的任意字符 |
\d | 匹配数字 |
\D | 匹配非数字 |
\w | 匹配单词字符 |
\W | 匹配非单词字符 |
\s | 匹配空白字符 |
\S | 匹配非空白字符 |
/[A-Za-z]/ // 匹配任意字母
/\d{3}/ // 匹配连续3位数字
/[^0-9]/ // 匹配非数字字符
元字符 | 说明 |
---|---|
(...) | 捕获分组,将子表达式分组并记录匹配内容 |
(?...) | 非捕获分组,仅分组但不记录匹配内容 |
\n | 反向引用,引用第 n 个捕获分组 |
/(\d{4})-(\d{2})/ // 分组捕获年、月,如 "2023-10" → 分组1="2023",分组2="10"
/(a)\1/ // 匹配连续两个相同的 "a"(如 "aa")
/(?:abc)+\d{2}/ // 匹配 "abcabc12",但不捕获 "abc" 分组
零宽断言
零宽断言是正则表达式中的一种特殊断言,它不匹配任何字符,但会检查某个位置是否满足特定条件。
前瞻
正则表达式从文本头部向尾部开始解析,文本尾部方向,称为“前”。
前瞻,在正则表达式匹配到规则的时候,向前检查是否符合断言。符合和不符合特定断言称为“肯定/正向”和“否定/负向”匹配。
正向前瞻:(?=...),表示在当前位置的后面查找匹配条件,但不消耗字符(即不移动匹配的“游标”)。
负向前瞻:(?!...),表示在当前位置的后面查找不匹配条件。
console.log("a2*34V8".replace(/\w(?=\d)/g, "X"));
console.log("a2*34V8".replace(/\w(?!\d)/g, "X"));
后瞻
与前瞻的方向相反
正向后瞻:(?<=...),表示在当前位置的前面查找匹配条件。
负向后瞻:(?<!...),表示在当前位置的前面查找不匹配条件。
console.log("a2*34V8".replace(/(?<=\d)\w/g, "X"));
console.log("a2*34V8".replace(/(?<!\d)\w/g, "X"));