第一章：正則表達式基礎(chǔ)概念

1.1 什么是正則表達式

正則表達式（Regular Expression）是用于匹配字符串中字符組合的模式，在前端開發(fā)中廣泛應(yīng)用于：

• 表單驗證
• 數(shù)據(jù)清洗
• URL解析
• 文本替換
• 路由匹配

1.2 正則表達式工作原理

通過引擎實現(xiàn)模式匹配，JavaScript使用Perl兼容的正則表達式語法（PCRE）

1.3 基礎(chǔ)示例演示

// 手機號驗證簡單示例
const reg = /^1[3-9]\d{9}$/;
console.log(reg.test('13800138000')); // true

---

第二章：正則表達式核心語法

2.1 元字符大全表

元字符	說明
.	匹配除換行外任意字符
\d	數(shù)字 [0-9]
\D	非數(shù)字
\w	單詞字符 [a-zA-Z0-9_]
\s	空白符

2.2 量詞系統(tǒng)詳解

// 常見量詞使用示例
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;
// 排除數(shù)字的寫法
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 密碼強度驗證

// 包含大小寫字母、數(shù)字、特殊字符，至少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 創(chuàng)建正則表達式

// 兩種創(chuàng)建方式對比
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()方法

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

---

第五章：表單驗證實戰(zhàn)（3000字）

5.1 綜合驗證函數(shù)示例

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 實時驗證實現(xiàn)

<!-- HTML5結(jié)合正則驗證 -->
<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中的正則工具方法

---

結(jié)語

正則表達式是前端開發(fā)者必須掌握的核心技能之一。本文從基礎(chǔ)到高級應(yīng)用全面覆蓋，建議收藏作為開發(fā)手冊使用。后續(xù)將持續(xù)更新實際開發(fā)中的最佳實踐。

---

附件：常用正則總結(jié)

以下是一份包含 50+ 前端常用正則表達式 的合集大全，涵蓋表單驗證、字符串處理、業(yè)務(wù)場景等高頻需求場景。每個正則表達式均附帶說明和代碼示例，可直接在項目中參考使用：

---

一、表單驗證類正則（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,}$/ // 企業(yè)郵箱限制（示例：禁止使用某些域名）
/^[\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位，包含大小寫字母和數(shù)字
/^(?=.*[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. 金額格式驗證

// 標準金額（支持千分位和兩位小數(shù)）
/^-?\d{1,3}(,\d{3})*(\.\d{1,2})?$/// 簡單金額（無千分位）
/^\d+(\.\d{1,2})?$/

7. 用戶名驗證

// 中文姓名（2-4個漢字）
/^[\u4e00-\u9fa5]{2,4}$/// 英文用戶名（4-16位字母數(shù)字+下劃線）
/^[a-zA-Z0-9_]{4,16}$/

8. 車牌號驗證

// 中國車牌號（新能源+傳統(tǒng)）
/^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9掛學(xué)警港澳]$/

---

二、字符串處理類正則（15個）

1. 提取數(shù)字

// 提取字符串中所有整數(shù)
/\d+/g // 提取浮點數(shù)（含負數(shù)）
/-?\d+(?:\.\d+)?/g

2. 提取URL參數(shù)

// 獲取URL查詢參數(shù)
/([^?=&]+)=([^&]*)/g

3. 去除HTML標簽

// 基礎(chǔ)去標簽
/<[^>]+>/g // 保留指定標簽（如保留<p>和<a>）
/<(?!\/?(p|a)(\s|>))[^>]+>/gi

4. 匹配中文

// 純中文字符串
/^[\u4e00-\u9fa5]+$/ // 包含中文
/[\u4e00-\u9fa5]/

5. 千分位格式化

// 數(shù)字添加千分位（如 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))

---

三、業(yè)務(wù)場景類正則（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. 密碼復(fù)雜度驗證

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

2. 匹配嵌套HTML標簽

// 匹配<div>標簽及其內(nèi)容（簡單場景）
/<div\b[^>]*>([\s\S]*?)<\/div>/gi

3. 駝峰轉(zhuǎn)中劃線

// 將駝峰式轉(zhuǎn)為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. 正則表達式需要根據(jù)具體業(yè)務(wù)需求調(diào)整
2. 注意轉(zhuǎn)義字符處理（如.需寫成\.）
3. 性能優(yōu)化：避免過度復(fù)雜的正則
4. 兼容性處理：部分新特性（如命名捕獲組）需考慮瀏覽器支持
5. 安全性：避免正則表達式拒絕服務(wù)攻擊（ReDoS）

---

完整代碼示例可參考以下GitHub倉庫：
https://github.com/example/regex-collection

在線測試工具推薦：

• Regex101
• RegExr

可根據(jù)實際需求組合修改這些正則表達式，建議先使用在線工具驗證匹配效果。