JavaScript加强篇——第九章 正则表达式高级应用（终）
目录
一、边界符与精确匹配
二、量词详解
三、字符类
四、预定义类
五、修饰符
六、替换操作
正则表达式核心要点总结：边界符（^/$）用于精确匹配，量词（*/+/?/{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 => ({'&': '&','<': '<','>': '>','"': '"',"'": '''}[tag]));
}console.log(escapeHTML('<div>"Test"</div>'));
// "<div>"Test"</div>"✅ 正则表达式核心要点总结
📝 高频面试题速答
-
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匹配非字母数字下划线
🧠 记忆口诀
"边界量词定范围，预定义类提效率"
边界：^ 和 $ 确定匹配位置
量词：控制字符出现次数
预定义类：简化常用字符集合
JavaScript加强篇已经结束，接下来是JavaScript最后的一个篇章，JavaScript的进阶篇。