【Java Web学习 | 第14篇】JavaScript(8) -正则表达式

【Java Web学习 | 第14篇】JavaScript(8) —— 正则表达式

正则表达式（Regular Expression，简称 regex / regexp）是处理字符串匹配、搜索、替换、提取、验证等操作时最强大的工具之一，几乎是现代前端开发、数据校验、日志处理等领域必备技能。

一、正则表达式到底是什么？

用最通俗的话说：

正则表达式就是一套描述字符串特征的“规则/模板”，
然后拿这个模板去跟目标字符串比对，看它符不符合这个规则。

常见用途举例：

验证手机号      1[3-9]\d{9}
验证邮箱         ^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,})+$ 
提取所有数字     \d+
判断是否全为中文   ^[\u4e00-\u9fa5]+$
替换所有空格     \s+  →  ""
校验密码强度     (?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}

二、JavaScript 中创建正则的两种方式

// 方式1：字面量（最常用，推荐）
const reg1 = /hello/i;          // i = ignore case 忽略大小写

// 方式2：构造函数（动态创建时使用）
const keyword = "world";
const reg2 = new RegExp(keyword, "ig");   // 第二个参数是修饰符字符串

两种方式的本质区别：

// 字面量会在代码解析时就创建正则对象
const r1 = /ab+c/;           // 固定不变

// 构造函数会在运行时才创建，可以动态拼接规则
let type = "jpg|png|gif";
const imgReg = new RegExp(`\\.(${type})$`, "i");

三、正则表达式核心组成（必须掌握）

组成部分	符号/写法	含义	记忆口诀
普通字符	abc123	匹配本身	写啥匹配啥
元字符	. ^ $ * + ? () [] {} \	\d \D \w \W \s \S	特殊功能的符号
字符类	[abc] [^abc] [a-z] [0-9]	匹配其中任意一个字符 / 不在其中的字符	方括号选一个
量词	* + ? {n} {n,} {n,m}	控制前面内容的重复次数	数量词
定位符	^ $ \b \B	匹配位置（开头、结尾、单词边界）	位置钉子
分组	(abc) (?:abc)	把多个字符当一个整体处理	小括号分组
或	a|b	或者	竖线选边站
转义	. \ \/ \n \t	让元字符变普通字符	反斜杠逃跑
修饰符	/reg/i /reg/g /reg/m /reg/s	全局、忽略大小写、多行、.匹配换行	性格标签

四、常用正则写法速查表（建议收藏）

用途	正则表达式	说明
手机号（大陆）	/^1[3-9]\d{9}$/	11位，以1开头
邮箱	/^[\w.-]+@[\w-]+.[\w-.]+$/	比较宽松版
纯数字	/^\d+$/	至少一个数字
中文姓名	/^[\u4e00-\u9fa5·]{2,16}$/	2~16个汉字，可含·
密码（强）	/^(?=.\d)(?=.[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,20}$/	必须包含大小写字母+数字
URL	/^https?:\/\/[\w.-]+.[\w-.]+(:\d+)?(\/[^\s]*)?$/	简单版
身份证号（18位）	/(^\d{15}$)	(^\d{17}[\dXx]$)/
日期（yyyy-mm-dd）	/^\d{4}-(0[1-9]	1[0-2])-(0[1-9]
6~18位字母数字下划线	/^[a-zA-Z0-9_]{6,18}$/	常见用户名规则

五、JavaScript 中常用的正则方法（重点）

const str = "Hello World! Hello JavaScript 2025!";

// 1. test() —— 返回 boolean（有没有匹配到）
console.log(/\d{4}/.test(str));           // true

// 2. exec() —— 返回匹配详情数组（最强大，但只找第一个）
const reg = /(\w+)\s+(\w+)/i;
const result = reg.exec("Hello World");
console.log(result);
// ["Hello World", "Hello", "World", index: 0, input: "..."]

// 3. match() —— 返回所有匹配结果（配合 g 修饰符）
console.log(str.match(/\b\w{5}\b/g));     // ["Hello", "World", "Hello", "JavaS"]

// 4. matchAll() —— 返回迭代器，包含所有匹配详情（推荐）
for (const m of str.matchAll(/(\w+)\s+(\w+)/g)) {
  console.log(m[0], m[1], m[2]);
}

// 5. replace() / replaceAll() —— 替换
console.log(str.replace(/\d{4}/g, "2026"));           // 替换年份
console.log(str.replace(/Hello/g, "Hi"));             // 替换所有Hello

// 6. search() —— 返回第一个匹配位置索引（没有返回-1）
console.log(str.search(/java/i));   // 12（不区分大小写）

// 7. split() —— 用正则切分
console.log("a1b2c3d".split(/\d/));  // ["a", "b", "c", "d"]

六、推荐学习进阶路径（2025-2026 实用路线）

阶段	目标	推荐资源/练习方式
入门	掌握基本符号、量词、定位符	regex101.com（神器！）
熟练	能写常见校验、提取、替换	写 10 个常见表单校验
进阶	理解捕获组、反向引用、零宽断言	《精通正则表达式》+ LeetCode正则题
高手	能看懂复杂正则、写高性能正则	分析开源项目里的正则写法
实战	处理日志、爬虫、代码生成等真实场景	写一个简易日志解析器

最后送一句口诀（背下来很有用）

“先定位、再匹配、别贪婪、善用组、别忘了转义”

• 先定位（^ $ \b）
• 再匹配具体内容
• 别贪婪（尽可能少匹配用 ?）
• 善用捕获组和非捕获组
• 元字符要转义

祝你早日把正则玩得溜溜的～
下一篇文章见！🚀