异常教程

js 正则表达式（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，正则表达式（Regular Expression）如同一把多功能瑞士军刀，能够高效处理字符串的匹配、验证、替换等复杂操作。无论是表单数据校验、URL 解析，还是文本内容提取，掌握 js 正则表达式 都能显著提升开发效率。对于编程初学者，它可能显得抽象难懂；但通过循序渐进的学习和生动的比喻，正则表达式将变得触手可及。本文将从基础语法讲起，逐步深入到高级技巧，并结合实际案例，帮助读者系统性掌握这一强大工具。

一、正则表达式的基础语法

1.1 什么是正则表达式？

正则表达式是一种描述文本模式的符号语言，可以理解为一种“字符串密码”。它通过特定的符号组合，定义了一种文本匹配规则。例如，/^\d{6}$/ 表示“以6位数字开头并结尾的字符串”，可以用于校验邮政编码是否合法。

在 JavaScript 中，正则表达式通常用 /pattern/modifiers 形式定义：

// 示例：校验邮箱格式  
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

其中 pattern 是匹配模式，modifiers 是修饰符（如 i 表示不区分大小写）。

1.2 基础模式构建

1.2.1 字符匹配

直接写字符即可匹配对应文本。例如：

const regex = /hello/;  
console.log("hello world".match(regex)); // 输出 ["hello"]

但遇到特殊字符（如 .、*）时需要转义：

const specialRegex = /\.js$/; // 匹配以.js结尾的文件名  
console.log("script.js".match(specialRegex)); // 输出 ["script.js"]

1.2.2 元字符与特殊符号

元字符是具有特殊含义的符号，例如：

  • . 匹配任意单个字符（换行符除外）
  • * 匹配前面字符的0次或多次出现
  • + 匹配前面字符的1次或多次出现
  • ? 匹配前面字符的0次或1次出现

比喻说明：
可以将 . 想象成“通配符”，就像玩拼图时的空白块，能替代任意一个字符；而 * 则像贪吃蛇，会尽可能多地吞噬前面的字符。

1.3 边界匹配与修饰符

1.3.1 边界锚点

  • ^ 匹配字符串的开头
  • $ 匹配字符串的结尾

例如，/^\d+$/ 表示“整个字符串由数字组成”。

1.3.2 常用修饰符

修饰符含义示例
i忽略大小写/apple/i 匹配 "Apple"
g全局匹配（不中断索引）/a/g 匹配所有 "a"
m多行模式（^/$匹配每行）/^line/m 匹配每行开头

二、进阶元字符与组合技巧

2.1 量词的精准控制

2.1.1 贪婪与非贪婪模式

默认情况下，*、+ 是“贪婪”的，会尽可能多匹配字符。例如：

const greedyRegex = /<.*>/;  
console.log("<div>content</div>".match(greedyRegex));  
// 输出 ["<div>content</div>"]（匹配了整个字符串）

添加 ? 可以改为非贪婪模式：

const nonGreedyRegex = /<.*?>/;  
console.log("<div>content</div>".match(nonGreedyRegex));  
// 输出 ["<div>"]（仅匹配到第一个闭合标签）

2.1.2 精确次数限定

使用 {n}、{n,}、{n,m} 控制匹配次数：

// 匹配3位数字  
const threeDigits = /\d{3}/;  
// 匹配至少2位数字  
const minTwoDigits = /\d{2,}/;  
// 匹配2-4位数字  
const rangeDigits = /\d{2,4}/;

2.2 字符集与排除

2.2.1 字符集 [...]

定义可选字符范围。例如：

// 匹配小写字母或数字  
const alphaNum = /[a-z0-9]/;  
// 匹配元音字母  
const vowels = /[aeiou]/;

添加 ^ 可以反转匹配：

// 匹配非数字字符  
const nonDigit = /[^0-9]/;

2.2.2 预定义字符类

JavaScript 提供了多个内置字符类，简化书写：

  • \d 匹配数字（等价 [0-9]）
  • \w 匹配字母、数字、下划线（等价 [a-zA-Z0-9_]）
  • \s 匹配空白字符（空格、换行等）
  • \b 匹配单词边界（用于精确匹配单词）

2.3 分组与捕获

通过 ( ) 对部分模式进行分组，并捕获匹配内容。例如：

const urlRegex = /https?:\/\/(www\.)?(\w+)\.com/;  
const match = "https://www.example.com".match(urlRegex);  
console.log(match); // 输出 ["https://www.example.com", "www.", "example"]

其中 match[1] 和 match[2] 分别捕获了分组内容。

三、高级技巧与实战案例

3.1 正向与反向预查

预查（Lookahead/Lookbehind）允许在不捕获的情况下检查匹配条件：

  • (?=...) 正向预查（后续必须匹配）
  • (?!...) 负向预查（后续不能匹配）
  • (?<=...) 正向后预查（前面必须匹配）
  • (?<!...) 负向后预查（前面不能匹配）

案例：密码强度验证
要求：

  1. 至少8位
  2. 包含大写字母、小写字母、数字
const passwordRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$/;  
console.log(passwordRegex.test("Abc123!")); // false（不足8位）  
console.log(passwordRegex.test("Abcdefg123")); // true

3.2 替换与拆分操作

3.2.1 替换文本

使用 String.replace() 方法：

// 将所有空格替换为下划线  
const sanitized = "hello world".replace(/\s+/g, "_");  
console.log(sanitized); // 输出 "hello_world"

3.2.2 拆分字符串

通过 String.split() 实现复杂分隔符拆分：

// 以逗号或分号分割，忽略空格  
const items = "apple, banana; orange".split(/[\s,;]+/);  
console.log(items); // 输出 ["apple", "banana", "orange"]

3.3 表单验证实战

案例1：邮箱验证

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;  
function validateEmail(email) {  
  return emailRegex.test(email);  
}  
console.log(validateEmail("test@example.com")); // true

案例2：手机号校验（中国）

// 11位，以13/15/18开头  
const phoneRegex = /^1[358]\d{9}$/;  
function checkPhone(phone) {  
  return phoneRegex.test(phone);  
}  
console.log(checkPhone("13812345678")); // true

四、常见误区与调试技巧

4.1 特殊字符未转义

忘记转义 .、*、$ 等字符会导致匹配失效。例如：

// 错误：未转义点号  
const wrongRegex = /.js$/; // 实际匹配任意字符+js结尾  
// 正确写法  
const correctRegex = /\.js$/;

4.2 全局匹配与索引问题

使用 g 修饰符时，match() 返回所有匹配项，而 exec() 需手动重置索引：

const regex = /a/g;  
console.log(regex.exec("apple")); // ["a", index:0]  
console.log(regex.exec("apple")); // ["a", index:2]（注意索引变化）

4.3 调试工具推荐

  • 在线工具：Regex101（支持可视化调试）
  • 开发环境：Chrome DevTools 的正则表达式测试功能

结论

正则表达式是 JavaScript 开发者必备的技能之一。通过理解其核心语法、掌握元字符组合逻辑，并结合实际案例练习，开发者可以高效完成文本处理任务。从基础的字符匹配到高级的预查技巧，正则表达式的能力边界远超“字符串查找”——它更像是一个强大的文本处理引擎。建议读者通过编写真实场景的验证逻辑（如表单校验、URL 解析）来巩固知识，并借助调试工具逐步优化表达式。

掌握 js 正则表达式，不仅能提升代码效率，更能培养一种“模式化思维”，这将对后续学习更复杂的算法和框架设计大有帮助。现在，不妨打开你的编辑器，尝试用正则表达式解决一个日常开发中的字符串问题吧！

最新发布

查看更多文章