【Java Web学习 | 第14篇】JavaScript(8) – 正则表达式（RegExp）（2026最新版）
恭喜你完成事件绑定！
现在进入 正则表达式（Regular Expression，简称 RegExp），这是 JavaScript 中处理字符串匹配、搜索、替换、验证的强大工具。在 Java Web 项目中，正则表达式是表单验证（用户名、密码、邮箱、手机号）、数据清洗、URL 参数提取、日志解析等场景的必备技能。
2026 年，正则表达式核心语法稳定，新增了 RegExp.escape()（安全转义用户输入，防止注入），浏览器支持更加完善。掌握正则后，你能大幅减少代码量，提升表单安全性。
1. 正则表达式基础
正则表达式是一个描述字符串规则的模式，用于匹配、查找或替换文本。
创建方式（两种）
// 1. 字面量方式（推荐，性能更好）
const reg1 = /hello/i; // i = 忽略大小写
// 2. 构造函数方式（动态模式时使用）
const pattern = "hello";
const reg2 = new RegExp(pattern, "gi"); // g=全局, i=忽略大小写
常用修饰符（Flags）
g：全局匹配（找所有）i：忽略大小写m：多行匹配（^ 和 $ 匹配每行开头/结尾）s（dotAll）：.可以匹配换行符（ES2018）u：Unicode 支持（处理表情等）
2. 元字符速查表（核心记忆）
字符类：
.：任意字符（除换行）\d：数字 [0-9]\D：非数字\w：字母、数字、下划线 [a-zA-Z0-9_]\W：非 \w\s：空白字符（空格、制表符、换行等）\S：非空白
边界与定位：
^：字符串开头$：字符串结尾\b：单词边界\B：非单词边界
量词（重复）：
*：0 次或多次+：1 次或多次?：0 次或 1 次{n}：正好 n 次{n,}：至少 n 次{n,m}：n 到 m 次
分组：
()：捕获分组(?:)：非捕获分组(?=)：正向先行断言（ lookahead ）
3. RegExp 对象常用方法
const str = "Hello Java Web 2026, hello javascript!";
// 1. test()：返回 boolean（验证最常用）
const regEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(regEmail.test("chongyang@example.com")); // true
// 2. exec()：返回匹配结果数组（带详细信息）
const reg = /hello/gi;
console.log(reg.exec(str));
// 3. String 对象的方法（更常用）
console.log(str.match(/hello/gi)); // 全局匹配数组
console.log(str.search(/java/i)); // 返回第一个匹配位置
console.log(str.replace(/hello/gi, "Hi")); // 替换
console.log(str.split(/\s+/)); // 按空白分割
4. Java Web 常用正则表达式（直接复制使用）
// 1. 用户名（字母、数字、下划线，4-16位，字母开头）
const regUsername = /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;
// 2. 密码（至少8位，包含字母、数字、特殊字符）
const regPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
// 3. 邮箱（较实用版）
const regEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
// 4. 手机号（中国大陆）
const regMobile = /^1[3-9]\d{9}$/;
// 5. URL
const regUrl = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/;
// 6. 身份证号（18位简化版）
const regIdCard = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
2026 新特性：RegExp.escape(str) 可以安全转义用户输入，避免正则注入。
const userInput = "hello.world?";
const safePattern = RegExp.escape(userInput);
const regex = new RegExp(safePattern);
5. 实战示例：表单验证（结合事件）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>正则表达式实战 - 表单验证</title>
<style>
.error { color: red; font-size: 0.9rem; }
input:valid { border-color: green; }
input:invalid { border-color: red; }
</style>
</head>
<body>
<h1>注册表单验证</h1>
<form id="regForm">
<input type="text" id="username" placeholder="用户名（4-16位）" required>
<span id="usernameError" class="error"></span><br><br>
<input type="email" id="email" placeholder="邮箱" required>
<span id="emailError" class="error"></span><br><br>
<input type="tel" id="mobile" placeholder="手机号" required>
<span id="mobileError" class="error"></span><br><br>
<input type="password" id="password" placeholder="密码（至少8位，含大小写字母、数字、特殊字符）" required>
<span id="passwordError" class="error"></span><br><br>
<button type="submit">注册</button>
</form>
<script>
const form = document.getElementById('regForm');
// 正则定义
const regex = {
username: /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/,
email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
mobile: /^1[3-9]\d{9}$/,
password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
};
// 实时验证
function validateField(input, regex, errorSpan) {
if (regex.test(input.value.trim())) {
errorSpan.textContent = '';
input.classList.remove('invalid');
} else {
errorSpan.textContent = '格式不正确';
}
}
// 绑定 input 事件
document.getElementById('username').addEventListener('input', (e) => {
validateField(e.target, regex.username, document.getElementById('usernameError'));
});
// 表单提交验证
form.addEventListener('submit', (e) => {
e.preventDefault();
const username = document.getElementById('username').value.trim();
const email = document.getElementById('email').value.trim();
const mobile = document.getElementById('mobile').value.trim();
const password = document.getElementById('password').value;
if (regex.username.test(username) &&
regex.email.test(email) &&
regex.mobile.test(mobile) &&
regex.password.test(password)) {
alert('注册信息验证通过！\n（实际项目中这里会调用 fetch 提交到 Spring Boot）');
// 这里可以执行 fetch('/api/register', { method: 'POST', body: JSON.stringify(...) })
} else {
alert('请检查输入格式！');
}
});
</script>
</body>
</html>
6. 最佳实践（2026 建议）
- 不要过度使用正则：简单场景用字符串方法（
includes、startsWith）更清晰。 - 可读性：复杂正则加上注释，或拆分成多个小正则。
- 性能：避免在循环中创建正则对象（提前定义）。
- 安全性：用户输入用于正则时，必须用
RegExp.escape()。 - 测试工具：推荐 regex101.com 或浏览器控制台实时调试。
7. 小练习（立即动手）
- 写一个正则验证 QQ 号（5-11 位纯数字，第一位不为 0）。
- 实现一个函数
validatePassword(pwd)，返回密码强度（弱/中/强）。 - 在上面表单示例中添加“确认密码”字段，要求两次密码一致（用 JS 比较）。
- 使用
replace把字符串中所有手机号替换为***（脱敏）。
下一篇文章预告：《【Java Web学习 | 第15篇】JavaScript(9) – 异步编程（Promise + async/await）与 Fetch API》
我们将学习现代异步机制，并使用 fetch 真正调用 Spring Boot 后端 REST 接口，实现注册、登录、数据查询等功能。
本篇核心总结：
- 创建：
/pattern/flags或new RegExp() - 验证：
regex.test(str) - 提取：
str.match(regex) - 替换：
str.replace(regex, replacement) - 表单验证：正则是前端第一道防线，后端必须二次验证
有问题随时问：
- 想要更多常用正则合集（身份证、URL、日期等）？
- 需要练习答案 + 完整代码？
- 或直接进入 异步 + Fetch 篇？
回复“给我练习答案”或“下一篇 Fetch”，我立刻继续！
正则表达式虽然入门有难度，但一旦熟练，会成为你开发中的“瑞士军刀”。继续加油，你的 Java Web 全栈技能正在快速成型！🚀
