【高频考点精讲】前端工程师必会的正则表达式实战技巧大全

前端工程师必会的正则表达式实战技巧大全

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

正则表达式就像程序员手中的瑞士军刀，看起来小巧精致，用起来却威力无穷。全栈老李今天要带大家深入探索这个让新手望而生畏、老手爱不释手的强大工具。

正则表达式到底是什么？

想象你正在玩一个文字版的"大家来找茬"游戏，需要在一大段文字中快速找出所有符合特定模式的字符串。正则表达式就是帮你完成这个任务的超级搜索工具。它用一系列特殊字符组成的"搜索模式"，能精准匹配、查找、替换文本内容。

// 全栈老李示例：最简单的邮箱验证正则
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test('laoli@quanzhan.com')); // true

基础语法快速上手

正则表达式的核心在于元字符，这些特殊符号就像乐高积木，通过不同组合能构建出强大的匹配模式：

• \d 匹配数字，相当于 [0-9]
• \w 匹配单词字符（字母、数字、下划线）
• \s 匹配空白字符（空格、制表符等）
• . 匹配除换行符外的任意字符
• * 匹配前一个元素零次或多次
• + 匹配前一个元素一次或多次
• ? 匹配前一个元素零次或一次

// 全栈老李示例：提取字符串中的所有数字
const str = "订单号：ORD20230615，金额：￥399.00";
const numbers = str.match(/\d+/g); 
console.log(numbers); // ["20230615", "399", "00"]

实战技巧大放送

1. 表单验证三剑客

表单验证是正则最经典的用武之地。全栈老李给大家准备了三个高频场景：

// 手机号验证（中国大陆）
const mobileRegex = /^1[3-9]\d{9}$/;

// 身份证号验证（简易版）