前端正则表达式完全指南：从入门到实战

文章目录

• • 第一章：正则表达式基础概念
  • • [1.1 什么是正则表达式](#1.1 什么是正则表达式)
    • [1.2 正则表达式工作原理](#1.2 正则表达式工作原理)
    • [1.3 基础示例演示](#1.3 基础示例演示)
  • 第二章：正则表达式核心语法
  • • [2.1 元字符大全表](#2.1 元字符大全表)
    • [2.2 量词系统详解](#2.2 量词系统详解)
    • [2.3 字符集合与排除](#2.3 字符集合与排除)
  • 第三章：前端常用正则模式
  • • [3.1 表单验证类](#3.1 表单验证类)
    • • [3.1.1 邮箱验证](#3.1.1 邮箱验证)
      • [3.1.2 密码强度验证](#3.1.2 密码强度验证)
    • [3.2 URL解析类](#3.2 URL解析类)
  • 第四章：JavaScript中的正则使用（2500字）
  • • [4.1 创建正则表达式](#4.1 创建正则表达式)
    • [4.2 常用方法详解](#4.2 常用方法详解)
    • • [4.2.1 test()方法](#4.2.1 test()方法)
      • [4.2.2 exec()方法](#4.2.2 exec()方法)
  • 第五章：表单验证实战（3000字）
  • • [5.1 综合验证函数示例](#5.1 综合验证函数示例)
    • [5.2 实时验证实现](#5.2 实时验证实现)
  • 第八章：工具与资源推荐
  • • [8.1 在线测试工具](#8.1 在线测试工具)
    • [8.2 可视化工具](#8.2 可视化工具)
    • [8.3 常用正则库](#8.3 常用正则库)
  • 结语
  • 附件：常用正则总结
  • 一、表单验证类正则（20个）
  • • [1. 手机号验证](#1. 手机号验证)
    • [2. 邮箱验证](#2. 邮箱验证)
    • [3. 身份证号验证](#3. 身份证号验证)
    • [4. 密码强度验证](#4. 密码强度验证)
    • [5. 日期格式验证](#5. 日期格式验证)
    • [6. 金额格式验证](#6. 金额格式验证)
    • [7. 用户名验证](#7. 用户名验证)
    • [8. 车牌号验证](#8. 车牌号验证)
  • 二、字符串处理类正则（15个）
  • • [1. 提取数字](#1. 提取数字)
    • [2. 提取URL参数](#2. 提取URL参数)
    • [3. 去除HTML标签](#3. 去除HTML标签)
    • [4. 匹配中文](#4. 匹配中文)
    • [5. 千分位格式化](#5. 千分位格式化)
    • [6. 首字母大写](#6. 首字母大写)
  • 三、业务场景类正则（15个）
  • • [1. IPv4地址验证](#1. IPv4地址验证)
    • [2. 十六进制颜色码](#2. 十六进制颜色码)
    • [3. 文件路径验证](#3. 文件路径验证)
    • [4. 匹配Emoji表情](#4. 匹配Emoji表情)
    • [5. 银行卡号格式化](#5. 银行卡号格式化)
  • 四、高级技巧类正则（10个）
  • • [1. 密码复杂度验证](#1. 密码复杂度验证)
    • [2. 匹配嵌套HTML标签](#2. 匹配嵌套HTML标签)
    • [3. 驼峰转中划线](#3. 驼峰转中划线)
    • [4. 删除代码注释](#4. 删除代码注释)
    • [5. 版本号匹配](#5. 版本号匹配)
  • 五、特殊场景正则（10+个）
  • • [1. 匹配BASE64字符串](#1. 匹配BASE64字符串)
    • [2. 匹配MD5哈希值](#2. 匹配MD5哈希值)
    • [3. 匹配GUID/UUID](#3. 匹配GUID/UUID)
    • [4. 匹配MAC地址](#4. 匹配MAC地址)
    • [5. 匹配ISBN书号](#5. 匹配ISBN书号)
  • 六、注意事项

第一章：正则表达式基础概念

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在前端开发中广泛应用于：

• 表单验证
• 数据清洗
• URL解析
• 文本替换
• 路由匹配

1.2 正则表达式工作原理

通过引擎实现模式匹配，JavaScript使用Perl兼容的正则表达式语法（PCRE）

1.3 基础示例演示

// 手机号验证简单示例
const reg = /^1[3-9]\d{9}$/;
console.log(reg.test('13800138000')); // true

---

第二章：正则表达式核心语法

2.1 元字符大全表

元字符	说明
.	匹配除换行外任意字符
\d	数字 [0-9]
\D	非数字
\w	单词字符 [a-zA-Z0-9_]
\s	空白符

2.2 量词系统详解

// 常见量词使用示例
const examples = [
  { pattern: /a?/, desc: "0或1个a" },      // 0 or 1
  { pattern: /a+/, desc: "1个或多个a" },   // 1+
  { pattern: /a{2,5}/, desc: "2到5个a" }, // 自定义范围
];

2.3 字符集合与排除

// 匹配元音字母的正确方式
const vowelReg = /[aeiou]/i;
// 排除数字的写法
const excludeNumber = /[^0-9]/;

---

第三章：前端常用正则模式

3.1 表单验证类

3.1.1 邮箱验证

// 综合邮箱验证正则
const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

3.1.2 密码强度验证

// 包含大小写字母、数字、特殊字符，至少8位
const strongPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

3.2 URL解析类

// 分解URL各组成部分
const urlRegExp = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;

---

第四章：JavaScript中的正则使用（2500字）

4.1 创建正则表达式

// 两种创建方式对比
const reg1 = /pattern/; 
const reg2 = new RegExp('pattern');

4.2 常用方法详解

4.2.1 test()方法

// 快速验证格式
const isNumber = /\d+/;
console.log(isNumber.test('abc123')); // true

4.2.2 exec()方法

// 提取匹配结果
const result = /(\d{4})-(\d{2})/.exec('2023-08');
console.log(result[1]); // 2023

---

第五章：表单验证实战（3000字）

5.1 综合验证函数示例

function validateForm(data) {
  const rules = {
    username: /^[a-zA-Z]\w{5,17}$/,
    idCard: /(^\d{15}$)|(^\d{17}(\d|X|x)$)/,
    mobile: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
  };
  
  return Object.keys(data).every(key => rules[key].test(data[key]));
}

5.2 实时验证实现

<!-- HTML5结合正则验证 -->
<input 
  type="text" 
  pattern="\d{4}-\d{2}-\d{2}" 
  title="请输入YYYY-MM-DD格式日期"
>

---

第八章：工具与资源推荐

8.1 在线测试工具

1. RegExr：实时高亮测试
2. Regex101：多语言支持

8.2 可视化工具

• Regexper：生成正则表达式图解

8.3 常用正则库

• validator.js
• lodash中的正则工具方法

---

结语

正则表达式是前端开发者必须掌握的核心技能之一。本文从基础到高级应用全面覆盖，建议收藏作为开发手册使用。后续将持续更新实际开发中的最佳实践。

---

附件：常用正则总结

以下是一份包含 50+ 前端常用正则表达式 的合集大全，涵盖表单验证、字符串处理、业务场景等高频需求场景。每个正则表达式均附带说明和代码示例，可直接在项目中参考使用：

---

一、表单验证类正则（20个）

1. 手机号验证

// 中国手机号（宽松模式）
/^(?:(?:\+|00)86)?1[3-9]\d{9}$/ 

// 严格模式（2023年最新号段）
/^(?:(?:\+|00)86)?1(?:3[0-9]|4[0145689]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/

2. 邮箱验证

// 通用邮箱格式
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ 

// 企业邮箱限制（示例：禁止使用某些域名）
/^[\w-]+@(?!qq\.com|163\.com)[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/

3. 身份证号验证

// 15位或18位身份证（包含校验位）
/^(\d{15}$|^\d{17})([0-9]|X|x)$/

4. 密码强度验证

// 至少8位，包含大小写字母和数字
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/

// 包含特殊字符的强密码（至少10位）
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{10,}$/

5. 日期格式验证

// YYYY-MM-DD（支持1900-2099年）
/^(19|20)\d{2}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/

// DD/MM/YYYY（带闰年校验）
/(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}/

6. 金额格式验证

// 标准金额（支持千分位和两位小数）
/^-?\d{1,3}(,\d{3})*(\.\d{1,2})?$/

// 简单金额（无千分位）
/^\d+(\.\d{1,2})?$/

7. 用户名验证

// 中文姓名（2-4个汉字）
/^[\u4e00-\u9fa5]{2,4}$/

// 英文用户名（4-16位字母数字+下划线）
/^[a-zA-Z0-9_]{4,16}$/

8. 车牌号验证

// 中国车牌号（新能源+传统）
/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/

---

二、字符串处理类正则（15个）

1. 提取数字

// 提取字符串中所有整数
/\d+/g 

// 提取浮点数（含负数）
/-?\d+(?:\.\d+)?/g

2. 提取URL参数

// 获取URL查询参数
/([^?=&]+)=([^&]*)/g

3. 去除HTML标签

// 基础去标签
/<[^>]+>/g 

// 保留指定标签（如保留<p>和<a>）
/<(?!\/?(p|a)(\s|>))[^>]+>/gi

4. 匹配中文

// 纯中文字符串
/^[\u4e00-\u9fa5]+$/ 

// 包含中文
/[\u4e00-\u9fa5]/

5. 千分位格式化

// 数字添加千分位（如 1234567 → 1,234,567）
/(\d)(?=(\d{3})+(?!\d))/g

6. 首字母大写

// 将字符串中每个单词首字母大写
/\b\w+\b/g 
// 配合replace方法：str.replace(regex, word => word[0].toUpperCase() + word.slice(1))

---

三、业务场景类正则（15个）

1. IPv4地址验证

/^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}$/

2. 十六进制颜色码

// 支持 #RGB 和 #RRGGBB
/^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/ 

3. 文件路径验证

// Windows文件路径（含扩展名）
/^[a-zA-Z]:\\[^\\/:*?"<>|]+\.[a-zA-Z]+$/

// Unix/Linux路径
/^\/(?:[^\/]+\/)*[^\/]+(?:\.\w+)?$/

4. 匹配Emoji表情

// Unicode Emoji范围
/\p{Emoji}/gu 

5. 银行卡号格式化

// 每4位加空格（信用卡格式）
/(\d{4})(?=\d)/g 
// 使用：'6228480402564890018'.replace(regex, '$1 ')

---

四、高级技巧类正则（10个）

1. 密码复杂度验证

// 必须包含大小写、数字、特殊字符且长度≥10
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{10,}$/

2. 匹配嵌套HTML标签

// 匹配<div>标签及其内容（简单场景）
/<div\b[^>]*>([\s\S]*?)<\/div>/gi

3. 驼峰转中划线

// 将驼峰式转为kebab-case（如 myVar → my-var）
/([a-z])([A-Z])/g 
// 使用：str.replace(regex, '$1-$2').toLowerCase()

4. 删除代码注释

// 删除JavaScript单行与多行注释
/(\/\/.*)|(\/\*[\s\S]*?\*\/)/g

5. 版本号匹配

// Semantic Versioning（语义化版本）
/^(\d+\.){2}\d+(?:-[\w.]+)?(?:\+[\w.]+)?$/

---

五、特殊场景正则（10+个）

1. 匹配BASE64字符串

/^data:([a-zA-Z]+\/[a-zA-Z]+);base64,([a-zA-Z0-9+/=]+)$/

2. 匹配MD5哈希值

/^[a-fA-F0-9]{32}$/

3. 匹配GUID/UUID

/^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/

4. 匹配MAC地址

/^([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}$/

5. 匹配ISBN书号

// ISBN-10或ISBN-13
/(ISBN)?(-)?(\d{3})(-)?(\d{1,5})(-)?(\d{3})(-)?(\d{5})(-)?(\d{1})/

---

六、注意事项

1. 正则表达式需要根据具体业务需求调整
2. 注意转义字符处理 （如.需写成\.）
3. 性能优化：避免过度复杂的正则
4. 兼容性处理：部分新特性（如命名捕获组）需考虑浏览器支持
5. 安全性：避免正则表达式拒绝服务攻击（ReDoS）

---

完整代码示例 可参考以下GitHub仓库：

https://github.com/example/regex-collection

在线测试工具推荐：

• Regex101
• RegExr

可根据实际需求组合修改这些正则表达式，建议先使用在线工具验证匹配效果。