本文给大家介绍JavaScript 正则表达式核心用法实践案例,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,感兴趣的朋友跟随小编一起看看吧
JavaScript 正则表达式核心用法指南
1. 正则表达式创建方式
| 创建方式 | 语法示例 | 适用场景 | 特点 |
|---|
| 字面量 | const re = /pattern/flags; | 模式固定时使用 | 编译时创建,性能更好,写法简洁 |
| 构造函数 | const re = new RegExp('pattern', 'flags'); | 模式需动态生成时使用 | 运行时创建,更灵活,允许拼接字符串 |
// 字面量方式 - 匹配数字
const numRegex = /\d+/g;
// 构造函数方式(动态创建)
const dynamicPattern = 'hello';
const dynamicRegex = new RegExp(dynamicPattern, 'i');
2. 正则表达式修饰符
| 修饰符 | 作用 | 示例说明 |
|---|
i(ignoreCase) | 不区分大小写匹配 | /abc/i 可匹配 “abc”, “ABC”, “AbC” |
g(global) | 全局匹配(查找所有匹配项) | 不加 g 只匹配第一个,加 g 匹配所有 |
m(multiline) | 多行模式,使 ^ 和 $ 匹配每行的开头和结尾 | 处理多行文本时有用 |
u(unicode) | 启用完整的 Unicode 支持 | 处理 Unicode 字符(如中文、表情符号)时必要 |
y(sticky) | 粘滞模式,从 lastIndex处开始精确匹配 | 用于连续匹配的场景 |
3. 常用元字符与量词
元字符(特殊字符类)
| 元字符 | 含义 | 等价字符类 | 示例 |
|---|
\d | 匹配数字(digit) | [0-9] | \d{3} 匹配三位数字 |
\D | 匹配非数字 | [^0-9] | \D+ 匹配连续非数字 |
\w | 匹配单词字符(字母、数字、下划线) | [a-zA-Z0-9_] | \w+ 匹配单词 |
\W | 匹配非单词字符 | [^a-zA-Z0-9_] | \W 匹配特殊字符 |
\s | 匹配空白字符(空格、制表符、换行符等) | [ \t\n\r\f] | \s+ 匹配空白 |
\S | 匹配非空白字符 | [^ \t\n\r\f] | \S 匹配非空白 |
. | 匹配除换行符外的任意单个字符 | - | a.c 匹配 “abc”, “a1c” |
\b | 匹配单词边界 | - | - |
\B | 匹配非单词边界 | - | - |
^ | 匹配字符串的开始位置 | - | ^Hello 匹配以Hello开头 |
$ | 匹配字符串的结束位置 | - | end$ 匹配以end结尾 |
量词(数量限定)
| 量词 | 含义 | 示例 |
|---|
* | 0次或多次匹配 | a* 匹配 “”, “a”, “aa”, … |
+ | 1次或多次匹配 | \d+ 匹配 “1”, “123”, … |
? | 0次或1次匹配 | colou?r 匹配 “color” 或 “colour” |
{n} | 精确匹配 n 次 | \d{3} 匹配三位数字 |
{n,} | 至少匹配 n 次 | a{2,} 匹配 “aa”, “aaa”, “aaaa” 等 |
{n,m} | 匹配 n 到 m 次 | \d{1,3} 匹配1到3位数字 |
4. 字符集合与分组
| 语法 | 说明 | JavaScript 示例 |
|---|
[abc] | 匹配方括号内的任意一个字符 | [aeiou] 匹配任意元音字母 |
[^abc] | 匹配不在方括号内的任意一个字符 | [^0-9] 匹配非数字字符 |
[a-z] | 匹配指定范围内的任意一个字符 | [A-Za-z] 匹配英文字母 |
(pattern) | 捕获组:将模式分组并记住匹配的文本 | (\d{3})-(\d{4}) 分别捕获 |
(?:pattern) | 非捕获组:只分组,不捕获匹配文本 | (?:\d{3})-(\d{4}) |
(?<name>pattern) | 命名捕获组:为捕获组命名 | (?<year>\d{4}) |
5. JavaScript 正则表达式方法
正则表达式对象方法
| 方法 | 功能描述 | 返回值 | 示例 |
|---|
test() | 测试字符串是否包含匹配模式 | Boolean | /\d/.test('abc123') // true |
exec() | 执行搜索匹配,获取详细信息 | Array 或 null | /\d+/.exec('abc123') // ['123'] |
字符串对象方法
| 方法 | 功能描述 | 返回值 | 示例 |
|---|
match() | 查找字符串中的匹配项 | Array 或 null | 'abc123'.match(/\d+/) // ['123'] |
matchAll() | 查找所有匹配项(需 g 标志) | 迭代器对象 | 用于遍历所有匹配 |
search() | 查找匹配项的索引位置 | Number(索引)或 -1 | 'abc'.search(/c/) // 2 |
replace() | 替换匹配的子串 | String(新字符串) | 'a1b2'.replace(/\d/g, '*') // 'a*b*' |
split() | 使用正则分割字符串 | Array | 'a,b,c'.split(/,/) // ['a','b','c'] |
6. 实用正则表达式示例
表单验证常用正则
| 验证类型 | 正则表达式 | 说明 |
|---|
| 手机号(中国大陆) | /^1[3-9]\d{9}$/ | 以1开头,第二位3-9,共11位数字 |
| 邮箱地址 | /^[\w.-]+@[\w.-]+\.\w+$/ | 匹配常见邮箱格式 |
| 身份证号(18位) | /^\d{17}[\dXx]$/ | 身份证格式(不包含校验位计算) |
| 用户名 | /^[a-zA-Z0-9_-]{4,16}$/ | 4到16位(字母,数字,下划线,减号) |
| 强密码 | /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/ | 最少6位,包含大小写字母、数字和特殊字符 |
| URL网址 | /^https?:\/\/[\w.-]+(\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]*$/ | 匹配HTTP/HTTPS网址 |
数据提取与处理
| 场景 | 正则表达式 | 说明 |
|---|
| 提取数字 | /\d+/g | 提取字符串中所有数字 |
| 匹配中文 | /^[\u4e00-\u9fa5]+$/ | 匹配中文字符 |
| 匹配日期(YYYY-MM-DD) | /^\d{4}-\d{2}-\d{2}$/ | 匹配简单日期格式 |
| 匹配IP地址 | /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/ | 匹配IPv4地址 |
7. 高级技巧与性能优化
贪婪模式与惰性模式
// 贪婪模式(默认):尽可能匹配更长的字符串
const greedyMatch = '12345678'.match(/\d{3,6}/); // ['123456']
// 惰性模式(加?):尽可能匹配更短的字符串
const lazyMatch = '12345678'.match(/\d{3,6}?/); // ['123']
前瞻断言与后瞻断言
| 断言类型 | 语法 | 说明 | 示例 |
|---|
| 正向先行断言(前瞻肯定) | x(?=y) | 匹配后面是 y 的 x | \d+(?=px) 匹配后面是 “px” 的数字 |
| 负向先行断言(前瞻否定) | x(?!y) | 匹配后面不是 y 的 x | \d+(?!px) 匹配后面不是 “px” 的数字 |
| 正向后行断言(后瞻肯定) | (?<=y)x | 匹配前面是 y 的 x | (?<=\$)\d+ 匹配前面是 “$” 的数字 |
| 负向后行断言(后瞻否定) | (?<!y)x | 匹配前面不是 y 的 x | (?<!\$)\d+ 匹配前面不是 “$” 的数字 |
分组与捕获
| 分组类型 | 语法 | 说明 | 示例 |
|---|
| 捕获组 | (pattern) | 捕获匹配内容,可通过 \1、$1引用 | /(\d{2})/(\d{2})/匹配 “12/25” |
| 非捕获组 | (?:pattern) | | |
| 只分组不捕获,提高性能 | \d+(?!px) /(?:\d{2})/(\d{2})/只捕获后两位 | | |
| 命名组 | ` | | |
| (?pattern)` | | | |
| 为捕获组命名,通过名称访问 | /(?\d{4})/匹配后通过 groups.year访问 | | |
💡 使用建议
转义特殊字符:如要匹配字面意义的 .、*、+等,需使用反斜杠转义:.、*、+
贪婪与惰性匹配:
- 贪婪模式(默认):".+"会匹配最长可能字符串
- 惰性模式(加 ?):".+?"匹配最短可能字符串
性能优化建议: - 性能优化:对于频繁使用的正则表达式,建议预编译为常量
- 可读性:复杂的正则表达式添加详细注释说明
- 错误处理:始终对正则匹配结果进行空值检查
- 测试验证:使用在线正则测试工具验证表达式正确性
正则表达式通过其强大的模式匹配能力,能显著提升文本处理效率。建议结合在线正则测试工具(如 RegExr)进行练习,并在实际项目中逐步掌握其高级用法。
8. 实际应用示例
// 表单验证实用函数
const Validator = {
// 手机号验证
isPhone(phone) {
return /^1[3-9]\d{9}$/.test(phone);
},
// 邮箱验证
isEmail(email) {
return /^[\w.-]+@[\w.-]+\.\w+$/.test(email);
},
// 身份证验证(简单版)
isIDCard(idCard) {
return /^\d{17}[\dXx]$/.test(idCard);
},
// 密码强度验证
isStrongPassword(password) {
return /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*? ]).{8,}$/.test(password);
}
};
// 使用示例
console.log(Validator.isPhone('13812345678')); // true
console.log(Validator.isEmail('test@example.com')); // true
// 数据提取示例
const DataExtractor = {
// 提取字符串中的所有数字
extractNumbers(str) {
return str.match(/\d+/g) || [];
},
// 提取邮箱地址
extractEmails(str) {
return str.match(/[\w.-]+@[\w.-]+\.\w+/g) || [];
},
// 隐藏敏感信息(如手机号)
hideSensitiveInfo(phone) {
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
},
// 格式化日期
formatDate(dateStr) {
return dateStr.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1');
}
};
// 使用示例
console.log(DataExtractor.extractNumbers('abc123def456')); // ['123', '456']
console.log(DataExtractor.hideSensitiveInfo('13812345678')); // '1385678'
数据提取与清洗
// 提取日志中的时间戳
const log = '2023-10-26 14:30:25 [INFO] User logged in';
const timeMatch = log.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);
// ['2023-10-26 14:30:25'] [1](@ref)
// 隐藏敏感信息(如银行卡号)
const cardNumber = '1234-5678-9012-3456';
const masked = cardNumber.replace(/\d{4}(?=-)/g, '****');
// '****-****-****-3456' [1](@ref)
到此这篇关于JavaScript 正则表达式核心用法指南的文章就介绍到这了,更多相关js正则表达式用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!