新闻中心

2026最新版 JavaScript正则表达式实战教程，新手快速上手全攻略

栏目：软件教程 日期： 作者：admin 阅读：11

本教程系统讲解 JavaScript 正则表达式的实战应用，适合新手和进阶开发者学习。内容覆盖基础匹配、字符类、量词、分组、替换与验证操作，以及实战项目案例，帮助你高效处理字符串、验证输入和提取数据，提高前端开发效率。

正文教程

一、基础概念

  1. 正则表达式（RegExp）：用于描述字符串匹配规则的模式。

  2. 使用方式：

    • 字面量方式：/pattern/flags

    • 构造函数方式：new RegExp("pattern", "flags")

  3. 常用标志：

    • g：全局匹配

    • i：忽略大小写

    • m：多行匹配

二、字符匹配与量词

步骤：

  1. 基础字符匹配：

const str = "Hello123";
const result = /Hello/.test(str); // true

  1. 字符类匹配：

const digits = /d+/;  // 匹配一个或多个数字

  1. 量词使用：

const pattern = /d{3,5}/;  // 匹配3到5位数字

技巧：

  • 使用 ^ 和 $ 匹配字符串开始和结束，避免部分匹配错误。

  • 字符集 [a-zA-Z0-9] 可以匹配多种字符类型。

三、分组与捕获

步骤：

  1. 使用括号分组：

const str = "abc123";
const match = /(abc)(d+)/.exec(str);
console.log(match[1]); // abc
console.log(match[2]); // 123

  1. 非捕获分组：(?:pattern)，用于匹配但不捕获。

技巧：

  • 分组编号按出现顺序自动分配，可在替换时使用 $1、$2。

  • 非捕获分组提高正则效率，避免多余捕获。

四、字符串替换与验证

  1. 使用 replace 替换字符串：

const str = "hello world";
const result = str.replace(/world/, "JS");
console.log(result); // hello JS

  1. 验证输入格式：

const emailPattern = /^[w.-]+@[w.-]+.w+$/;
emailPattern.test("example@test.com"); // true

技巧：

  • 全局替换时加 g 标志，替换所有匹配项。

  • 验证时尽量精确匹配，避免出现意外匹配。

五、实战案例

示例项目：手机号和邮箱批量提取

  1. 定义正则匹配手机号和邮箱：

const text = "联系我：13812345678，邮箱：example@test.com";
const phonePattern = /1[3-9]d{9}/g;
const emailPattern = /[w.-]+@[w.-]+.w+/g;

const phones = text.match(phonePattern);
const emails = text.match(emailPattern);

console.log(phones); // ["13812345678"]
console.log(emails); // ["example@test.com"]

  1. 使用 replace 对敏感信息进行脱敏处理。

技巧：

  • 对复杂文本，可结合多条正则处理不同类型数据。

  • 捕获分组可以快速提取特定字段，便于数据处理。

六、总结

通过本教程，你掌握了 JavaScript 正则表达式的核心方法，包括基础匹配、量词使用、分组捕获、字符串替换与验证、以及实战项目操作。新手可快速上手处理常见字符串问题，进阶用户可结合复杂正则实现批量提取、数据清洗和文本处理优化。

相关资讯