头像

嘻道奇闻

  • 文章199742
  • 阅读14625734

热门文章

首页 > 奇闻 > 正文内容

JS正则表达式实战指南：表单验证、数据提取、文本替换三大场景解决方案

奇闻2025-05-27 12:50:59

场景一：表单验证（test方法）

??问题描述??
用户注册时需验证手机号格式是否正确，但手动遍历字符串效率低下。

??解决方案??

javascript复制
// 用test()快速验证手机号格式
const isPhoneValid = (phone) => {
  return /^1[3-9]\d{9}$/.test(phone);
};
console.log(isPhoneValid("13812345678")); // true
console.log(isPhoneValid("12345"));        // false

??解析??

  • test()返回布尔值，适合快速判断格式是否符合
  • 正则中^和$确保从头到尾完全匹配，避免"13812345678abc"的误判

场景二：数据提取（exec方法）

??问题描述??
从日志文本中提取日期和错误码，如："2023-08-20 ERROR [Code:500]"。

??解决方案??

javascript复制
const log = "2023-08-20 ERROR [Code:500]";
const regex = /(\d{4}-\d{2}-\d{2}).+?$$Code:(\d+)$$/;
const result = regex.exec(log);

if (result) {
  console.log("日期:", result[1]);    // 2023-08-20
  console.log("错误码:", result[2]);  // 500
}

??解析??

  • exec()返回数组，第0项为完整匹配，后续项为分组捕获内容
  • 正则中(\d{4}-\d{2}-\d{2})捕获日期，(\d+)捕获数字错误码

场景三：批量文本替换（replace方法）

??问题描述??
将文本中的手机号中间4位替换为星号，保护用户隐私。

??解决方案??

javascript复制
const text = "联系方式：13812345678，备用号：15987654321";
const maskedText = text.replace(/(\d{3})(\d{4})(\d{4})/g, "$1****$3");
console.log(maskedText); 
// 输出：联系方式：138****5678，备用号：159****4321

??解析??

  • 正则分组(\d{3})捕获前3位，(\d{4})捕获中间4位（替换为????），(\d{4})捕获后4位
  • replace()第二个参数"$1****$3"保留第1、3组，隐藏第2组

总结：正则方法核心使用逻辑

方法适用场景关键技巧
test()快速验证格式（如登录校验）严格使用^和$锚点
exec()提取结构化数据（如日志解析）分组捕获 + while循环遍历
replace()批量修改文本（如脱敏处理）分组引用 + 正则全局匹配/g

??开发建议??

  1. 优先用test()替代exec()做简单验证（性能更优）
  2. 复杂替换场景可结合回调函数使用replace()：
javascript复制
"abc123".replace(/(\D+)(\d+)/, (match, p1, p2) => p1.toUpperCase()+p2)
// 输出：ABC123

相关推荐

搜索