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

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

news 2025/7/14 8:36:07

目录

一、边界符与精确匹配

二、量词详解

三、字符类

四、预定义类

五、修饰符

六、替换操作

正则表达式核心要点总结：边界符（^/$）用于精确匹配，量词（*/+/?/{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

⚠️ 关键要点

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

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

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

二、量词详解

量词类型与功能

量词说明等价写法示例
*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

⚠️ 注意事项

  1. 连字符 - 在字符类中表示范围（如 [a-z]）

  2. 若需匹配连字符本身，应放在开头或结尾：[-a] 或 [a-]

  3. 脱字符 ^ 在字符类开头表示取反

四、预定义类

常用预定义类

预定义类说明等效字符类
\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;"

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

📝 高频面试题速答

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

    A：前者匹配以abc开头的字符串，后者匹配以abc结尾的字符串

  2. Q：如何精确匹配6位数字验证码？

    A：使用 /^\d{6}$/

  3. Q：g修饰符的作用？

    A：全局匹配，找到所有匹配项而非在第一个匹配后停止

  4. Q：如何将"2023-12-31"转换为"31/12/2023"？

    A：str.replace(/^(\d{4})-(\d{2})-(\d{2})$/, '$3/$2/$1')

  5. Q：\w 和 \W 分别匹配什么？

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

🧠 记忆口诀

"边界量词定范围，预定义类提效率"

  • 边界：^ 和 $ 确定匹配位置

  • 量词：控制字符出现次数

  • 预定义类：简化常用字符集合

JavaScript加强篇已经结束，接下来是JavaScript最后的一个篇章，JavaScript的进阶篇。

http://www.dtcms.com/a/277674.html

相关文章：

  • Python __main__ 全面深度解析
  • C++ 右值引用和移动语义的应用场景
  • python的平安驾校管理系统
  • Python自动化：每日销售数据可视化
  • Linux-线程控制
  • System.getenv()拿不到你配置的环境变量
  • 【Mysql作业】
  • OSPF协议特性
  • kettle从入门到精通 第九十七课 ETL之kettle kettle资源仓库的5种方式
  • Linux修炼：开发工具
  • linux-shell脚本
  • 学习环形数组ringbuffer和缓存管理buffer_manager_struct的一些思考
  • k8s:0/1 nodes are available: pod has unbound immediate PersistentVolumeClaims.
  • CSS个人笔记分享【仅供学习交流】
  • 深度学习图像分类数据集—角膜溃疡识别分类
  • INA226 数据手册解读
  • CCS-MSPM0G3507-6-模块篇-OLED的移植
  • Leetcode 3614. Process String with Special Operations II
  • 【Vue】浏览器缓存 sessionStorage、localStorage、Cookie
  • XXL-TOOL v1.5.0 发布 | Java工具类库
  • https交互原理
  • 010_学习资源与社区支持
  • cs285学习笔记（一）：课程总览
  • 融合开源AI大模型与MarTech：AI智能名片与S2B2C商城小程序源码赋能数字化营销新生态
  • Boost.Asio 中 io_context 类 post 和 dispatch的区别
  • 启动Tomcat报错：A child container failed during start
  • MCP 服务开发到发布
  • 更换docker工作目录
  • MongoDB对接SpringBoot【大数据存储】
  • Hashtable 与 HashMap 的区别笔记