正则表达式是前端日常字符串处理的核心工具，通过精准控制边界、次数与逻辑关系实现表单验证、内容提取、安全替换、切割转换等任务。
正则表达式不是“学完就忘”的语法游戏，而是前端日常中真正扛活的字符串处理引擎。它不靠复杂度取胜，而靠精准控制字符边界、次数和逻辑关系的能力——验证一个手机号、提取一段价格、替换所有空格、切分驼峰命名，背后都是同一套简洁规则在起作用。
表单验证：用边界和范围守住输入底线
验证类需求最怕“看似匹配，实则漏网”。比如手机号必须是11位、以1开头、第二位是3–9，就不能只写/1[3-9]d{9}/——缺少^和$会导致"abc13812345678def"也被通过。
- 强制首尾锚定：
/^1[3-9]d{9}$/确保整个字符串严格符合 - 邮箱验证别硬背长串：先拆解逻辑——本地部分（字母数字+点横线下划线）、@符号、域名部分（含点分隔的多段），再组合：
^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$ - 密码强度可分层校验：用多个
test()分别检查长度、大小写字母、数字、特殊字符，比单条巨正则更易维护
内容提取：全局匹配 + 捕获组直取关键片段
从非结构化文本里捞数据，核心是“找什么”和“要哪部分”。match()适合全量提取，exec()配合循环适合逐个捕获带分组的内容。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 提取所有数字：
str.match(/d+/g)返回["100", "29"]；想连小数点一起提，改用/d+(.d+)?/g - 解析URL参数：
const reg = /([^&=]+)=([^&]*)/g，配合exec()循环，每轮result[1]是键，result[2]是值 - 提取中文：
/[u4e00-u9fa5]+/g覆盖常用汉字区间，比[u4e00-u9fff]更稳妥
安全替换：转义元字符 + 动态构造防踩坑
要替换的字符串本身含.、*、$等特殊字符时，直接拼进正则会出错。必须先转义，再构造。
- 用户输入的关键词搜索高亮：
escapeRegExp(keyword)函数应为keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 动态生成正则推荐用
RegExp构造函数：new RegExp(escapeRegExp(searchTerm), 'gi')，避免字面量中手动加双反斜杠 - 敏感词替换慎用
g修饰符但漏i：如/fuck/g无法匹配"FUCK"，应为/fuck/gi
字符串切割与格式转换：利用分组和断言做精细操作
split()不只是按固定字符切，配合正则能实现语义级分割；replace()也不只是替换成固定字符串，回调函数可动态计算新值。
- 驼峰转短横线：
str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()，利用两个捕获组定位大小写交界 - 按空白或标点切词但保留分隔符：
str.split(/(s+|[^ws]+)/)，括号让分隔符也进入结果数组 - 只替换开头的空格（不碰中间）：
str.replace(/^s+/, '')；只替换末尾：str.replace(/s+$/, '')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
