JavaScript正则表达式终极指南：从入门到精通（含实战案例）
** 本文是一份详尽的JavaScript正则表达式教程，从基础语法到高级技巧，结合大量实战案例，助你彻底掌握这个强大的文本处理工具，无论你是前端新手还是希望查漏补缺的开发者，本指南都将是你不可或缺的案头手册。
H1：JavaScript正则表达式终极指南：从入门到精通（含实战案例）
H2：前言：为什么每个JavaScript开发者都必须掌握正则表达式？
在JavaScript的世界里,我们每天都在与字符串打交道：验证用户输入、解析配置文件、提取关键信息、替换特定文本…… 当面对这些复杂的文本处理任务时，循环和条件判断往往显得力不从心且代码臃肿。
这时,正则表达式 就像一把瑞士军刀，它提供了一种强大、简洁且高效的方式来匹配、搜索、提取和操作文本，掌握它，意味着你拥有了处理文本的“超能力”，能写出更优雅、更健壮、更高效的代码，本教程将带你一步步揭开正则表达式的神秘面纱，从零基础到实战应用，让你彻底爱上这个强大的工具。
H2：第一部分：正则表达式入门 - 认识你的第一个“模式”
H3：什么是正则表达式？
正则表达式（Regular Expression，简称Regex或RegExp）是一个由字符和元字符组成的、描述字符串匹配模式的特殊字符串，它就是一套规则，用来定义我们想要查找的文本长什么样。
/hello/ 就是一个最简单的正则表达式，它的作用是匹配字符串中是否包含 "hello" 这个连续的字符序列。
H3：在JavaScript中如何创建正则表达式？
JavaScript提供了两种创建正则表达式对象的方式：
-
字面量方式 (推荐)：使用斜杠 将模式包围起来，这种方式简洁、直观，是日常开发中的首选。
const regex = /hello/;
-
构造函数方式：使用
new RegExp()构造函数，这种方式更灵活，允许我们动态地构建正则表达式模式（模式来自用户输入或变量）。const pattern = 'world'; const regex = new RegExp(pattern); // 或者包含特殊字符时需要双重转义 const specialRegex = new RegExp('\\d+'); // 匹配一个或多个数字
H2：第二部分：核心语法 - 构建你的匹配规则
正则表达式的强大之处在于其丰富的语法,我们将其分为三大块：字符类、量词、和定位符。
H3：1. 字符类 - 匹配某一类字符
字符类用于匹配一个字符集合中的任意一个字符。
| 元字符 | 描述 | 示例 | 匹配 |
|---|---|---|---|
[...] |
匹配方括号内的任意一个字符 | [abc] |
"a", "b", "c" |
[^...] |
匹配非方括号内的任意一个字符 | [^abc] |
"d", "1", "@" |
[a-z] |
匹配指定范围内的任意小写字母 | [a-z] |
"a" 到 "z" |
[A-Z] |
匹配指定范围内的任意大写字母 | [A-Z] |
"A" 到 "Z" |
[0-9] |
匹配任意数字 | [0-9] |
"0" 到 "9" |
\d |
匹配任意数字（等同于 [0-9]） |
\d |
"1", "8", "0" |
\D |
匹配非数字（等同于 [^0-9]） |
\D |
"a", "!", " " |
\w |
匹配任意“单词”字符（字母、数字、下划线） | \w |
"a", "1", "_" |
\W |
匹配非“单词”字符 | \W |
"!", "@", " " |
\s |
匹配任意空白字符（空格、制表符、换行等） | \s |
" ", "\t", "\n" |
\S |
匹配非空白字符 | \S |
"a", "1", "@" |
实战案例： 验证一个简单的手机号（假设为1开头，第二位是3-9，后面是9位数字）
const phoneRegex = /^1[3-9]\d{9}$/;
console.log(phoneRegex.test('13812345678')); // true
console.log(phoneRegex.test('12812345678')); // false (第二位不对)
console.log(phoneRegex.test('1381234567')); // false (位数不够)
H3：2. 量词 - 指定匹配次数
量词跟在字符或字符类后面,用来指定前面的元素需要出现多少次。
| 量词 | 描述 | 示例 | 匹配 |
|---|---|---|---|
| 匹配前面的元素零次或多次 | go*gle |
"gogle", "google", "gooogle" | |
| 匹配前面的元素一次或多次 | go+gle |
"google", "gooogle" (不匹配 "gogle") | |
| 匹配前面的元素零次或一次 | colou?r |
"color", "colour" | |
{n} |
匹配前面的元素恰好n次 | \d{3} |
"123", "456" |
{n,} |
匹配前面的元素至少n次 | \d{2,} |
"12", "123", "1234" |
{n,m} |
匹配前面的元素至少n次，但不超过m次 | \d{2,4} |
"12", "123", "1234" (不匹配 "12345") |
实战案例： 提取HTML标签中的内容
const html = '<div>你好，世界！</div>'; const tagRegex = /<div>(.*?)<\/div>/; // ? 表示非贪婪匹配，后面会讲 const match = html.match(tagRegex); console.log(match[1]); // 输出: "你好，世界！"
H3：3. 定位符 - 指定匹配位置
定位符（也称为“锚点”）本身不匹配任何字符，而是匹配一个位置。
| 定位符 | 描述 |
|---|---|
^ |
匹配字符串的开头 |
| 匹配字符串的 | |
\b |
匹配“单词”的边界（单词字符和非单词字符之间） |
\B |
匹配非单词边界 |
实战案例： 验证用户密码（必须以字母开头，以数字结尾，长度6-16位）
const passwordRegex = /^[a-zA-Z]\w{4,14}\d$/;
console.log(passwordRegex.test('abc123')); // true
console.log(passwordRegex.test('1abc123')); // false (不以字母开头)
console.log(passwordRegex.test('abc123!')); // false (不以数字结尾)
H2：第三部分：进阶技巧 - 让你的正则更强大
H3：1. 特殊字符与转义
像 , , , , , \, ^, , , , [], 这些在正则中有特殊含义的字符，如果想要匹配它们本身，就需要使用反斜杠 \ 进行转义。
示例： 匹配 5 这个数字，而不是 1 后面跟任意字符和 5。
// 错误写法，. 表示任意字符
const wrongRegex = /1.5/;
console.log(wrongRegex.test('1a5')); // true
// 正确写法，对 . 进行转义
const correctRegex = /1\.5/;
console.log(correctRegex.test('1a5')); // false
console.log(correctRegex.test('1.5')); // true
H3：2. 分组与捕获
使用圆括号 可以将多个元素组合成一个单元，并创建一个捕获组，捕获组允许你从匹配结果中提取出子匹配项。
示例： �
