当前位置：首页 > news >正文

JavaScript加强篇——第九章正则表达式高级应用（终）

news 2025/7/14 9:52:06

一、边界符与精确匹配

二、量词详解

三、字符类

四、预定义类

五、修饰符

六、替换操作

正则表达式核心要点总结：边界符（^/$）用于精确匹配，量词（*/+/?/{n,m}）控制字符出现次数，字符类（[]）和预定义类（\d/\w等）简化字符匹配，修饰符（i/g/m）实现大小写敏感、全局匹配和多行处理。关键应用包括表单验证（手机号、密码）、文本替换和格式化（日期、手机号），需注意边界组合和特殊字符处理。常见面试题涉及精确匹配、修饰符作用和字符串转换。记忆口诀："边界量词定范围，预定义类提效率"。

一、边界符与精确匹配

核心边界符

边界符	说明	示例
`^`	匹配字符串开头	`/^abc/` 匹配以abc开头的字符串
`$`	匹配字符串结尾	`/xyz$/` 匹配以xyz结尾的字符串

精确匹配技巧

// 1. 验证手机号（精确匹配）
const phoneReg = /^1[3-9]\d{9}$/;
console.log(phoneReg.test('13800138000')); // true
console.log(phoneReg.test('13800138000a')); // false（尾部多字符）// 2. 验证用户名（3-16位字母数字）
const userReg = /^[a-z0-9_]{3,16}$/i;
console.log(userReg.test('john_doe123')); // true
console.log(userReg.test('admin')); // true
console.log(userReg.test('a')); // false（太短）// 3. 精确匹配特定单词
const exactReg = /^二哈$/;
console.log(exactReg.test('二哈')); // true
console.log(exactReg.test('很二哈')); // false
console.log(exactReg.test('二哈很傻')); // false

⚠️ 关键要点

^和$同时使用实现精确匹配

实际表单验证中必须使用精确匹配

未使用边界符会导致部分匹配（如 /二哈/ 匹配 "很二哈"）

二、量词详解

量词类型与功能

量词	说明	等价写法	示例
`*`	0次或多次	`{0,}`	`/ab*c/` 匹配 "ac", "abc", "abbc"等
`+`	1次或多次	`{1,}`	`/a+b/` 匹配 "ab", "aab", 不匹配 "b"
`?`	0次或1次	`{0,1}`	`/colou?r/` 匹配 "color" 和 "colour"
`{n}`	精确n次	-	`/a{2}/` 匹配 "aa"
`{n,}`	至少n次	-	`/a{2,}/` 匹配 "aa", "aaa"等
`{n,m}`	n到m次	-	`/a{2,4}/` 匹配 "aa", "aaa", "aaaa"

关键应用场景

// 1. 验证QQ号（5位以上，不以0开头）
const qqReg = /^[1-9]\d{4,}$/;
console.log(qqReg.test('10000')); // true
console.log(qqReg.test('123456')); // true
console.log(qqReg.test('01234')); // false（0开头）// 2. 验证密码强度（至少8位，含大小写字母和数字）
const pwdReg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
console.log(pwdReg.test('Pass1234')); // true
console.log(pwdReg.test('weak')); // false// 3. 匹配可选后缀
const fileReg = /\.(jpg|png|gif)$/i;
console.log(fileReg.test('image.jpg')); // true
console.log(fileReg.test('document.pdf')); // false

❗ 常见错误

// 错误：量词与边界符错误组合
const badReg = /^a{2,4}$/;// 正确用法
console.log(badReg.test('aa')); // true
console.log(badReg.test('aaaaa')); // false（超过4个）// 实际应结合字符类使用
const goodReg = /^[a-z]{2,4}$/; // 2-4位小写字母

三、字符类

基础字符类

表达式	说明	等效写法
`[abc]`	匹配a、b或c	-
`[a-z]`	匹配任意小写字母	-
`[A-Z]`	匹配任意大写字母	-
`[0-9]`	匹配任意数字	`\d`
`[^a-z]`	匹配非小写字母的任意字符	-
`.`	匹配除换行符外的任意字符	-

高级应用技巧

// 1. 匹配十六进制颜色值
const colorReg = /^#([a-f0-9]{6}|[a-f0-9]{3})$/i;
console.log(colorReg.test('#ff0033')); // true
console.log(colorReg.test('#abc')); // true
console.log(colorReg.test('#ghijkl')); // false// 2. 提取中文字符
const chineseReg = /[\u4e00-\u9fa5]+/g;
const text = '正则表达式（Regular Expression）用于匹配字符串';
console.log(text.match(chineseReg)); // ["正则表达式", "用于匹配字符串"]// 3. 验证复杂密码（必须包含特殊字符）
const specialReg = /^(?=.*[!@#$%^&*])[\w!@#$%^&*]{8,}$/;
console.log(specialReg.test('P@ssw0rd!')); // true
console.log(specialReg.test('WeakPassword')); // false

⚠️ 注意事项

连字符 - 在字符类中表示范围（如 [a-z]）
若需匹配连字符本身，应放在开头或结尾：[-a] 或 [a-]
脱字符 ^ 在字符类开头表示取反

四、预定义类

常用预定义类

预定义类	说明	等效字符类
`\d`	数字字符	`[0-9]`
`\D`	非数字字符	`[^0-9]`
`\w`	字母数字下划线	`[a-zA-Z0-9_]`
`\W`	非字母数字下划线	`[^\w]`
`\s`	空白符（空格/制表/换行等）	`[\t\r\n\v\f]`
`\S`	非空白符	`[^\s]`

实际应用

// 1. 验证日期格式（YYYY-MM-DD）
const dateReg = /^\d{4}-\d{1,2}-\d{1,2}$/;
console.log(dateReg.test('2023-12-31')); // true
console.log(dateReg.test('2023/12/31')); // false// 2. 清理多余空格
const dirtyText = '   Hello  \t  World   \n';
const cleaned = dirtyText.replace(/\s+/g, ' ').trim();
console.log(cleaned); // "Hello World"// 3. 提取文本中的金额
const moneyText = '总计：$1,234.56 运费：$50.00';
const moneyReg = /\$\d{1,3}(,\d{3})*\.\d{2}/g;
console.log(moneyText.match(moneyReg)); // ["$1,234.56", "$50.00"]

五、修饰符

核心修饰符

修饰符	说明	应用场景
`i`	忽略大小写	用户名验证、搜索功能
`g`	全局匹配	批量替换、多次提取
`m`	多行模式	处理多行文本（^和$匹配每行）

使用示例

// 1. 忽略大小写匹配
const caseReg = /javascript/i;
console.log(caseReg.test('JavaScript')); // true
console.log(caseReg.test('JAVASCRIPT')); // true// 2. 全局替换敏感词
const content = '垃圾电影，太垃圾了！';
const cleanContent = content.replace(/垃圾/g, '**');
console.log(cleanContent); // "**电影，太**了！"// 3. 多行模式提取
const multiText = `第1行：苹果
第2行：香蕉
第3行：橙子`;
const lineReg = /^第\d+行：(.+)$/gm;
let match;
while ((match = lineReg.exec(multiText)) !== null) {console.log(match[1]); // 依次输出：苹果、香蕉、橙子
}

六、替换操作

replace方法详解

语法：

str.replace(regexp|substr, newSubstr|function)

三种替换模式

// 1. 简单替换
const text1 = '2023-12-31';
console.log(text1.replace(/-/g, '/')); // "2023/12/31"// 2. 使用捕获组重组
const text2 = '张小明, 李小红';
console.log(text2.replace(/(\w+), (\w+)/, '$2 $1')); // "李小红 张小明"// 3. 函数式高级替换
const text3 = '订单金额：$123.45';
const result = text3.replace(/\$(\d+\.\d{2})/, (match, amount) => {return `¥${(parseFloat(amount) * 6.5).toFixed(2)}`;
});
console.log(result); // "订单金额：¥802.43"

实际应用场景

// 1. 格式化手机号
const phone = '13800138000';
const formatted = phone.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1****$3');
console.log(formatted); // "138****8000"// 2. 转换驼峰命名
const cssName = 'border-top-width';
const camelCase = cssName.replace(/-(\w)/g, (_, letter) => {return letter.toUpperCase();
});
console.log(camelCase); // "borderTopWidth"// 3. 安全转义HTML
function escapeHTML(str) {return str.replace(/[&<>"']/g, tag => ({'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;'}[tag]));
}console.log(escapeHTML('<div>"Test"</div>')); 
// "&lt;div&gt;&quot;Test&quot;&lt;/div&gt;"

✅ 正则表达式核心要点总结

📝 高频面试题速答

Q：/^abc/ 和 /abc$/ 的区别？

A：前者匹配以abc开头的字符串，后者匹配以abc结尾的字符串
Q：如何精确匹配6位数字验证码？

A：使用 /^\d{6}$/
Q：g修饰符的作用？

A：全局匹配，找到所有匹配项而非在第一个匹配后停止
Q：如何将"2023-12-31"转换为"31/12/2023"？

A：str.replace(/^(\d{4})-(\d{2})-(\d{2})$/, '$3/$2/$1')
Q：\w 和 \W 分别匹配什么？

A：\w匹配字母数字下划线，\W匹配非字母数字下划线