前端基础知识之正则表达式用法_正则表达式

前言

今天给大家分享一下前端开发中正则表达式的核心知识点和实战用法。正则表达式在字符串处理、表单验证等场景里非常实用，掌握它能让你的代码更高效。

当然在你了解了什么是正则后，你也可以灵活的使用插件来为你服务，例如any-rule等。

一、正则表达式基础

1. 正则表达式的定义

正则表达式是一种用来匹配字符串的强大工具，在 js 中我们通常用字面量方式定义

const reg = /需要匹配的规则/修饰符;

2. 核心方法

test()：检查字符串中是否包含匹配内容，返回布尔值 true/false
exec()：返回匹配结果的数组，包含匹配值、位置等信息
match()：返回所有匹配结果的数组（全局匹配时）
replace()：替换匹配的内容并返回新字符串

const reg = /西游记/g;
const str = '西游记是四大名著之一,我爱看西游记';

console.log(reg.test(str)); // true
console.log(reg.exec(str)); // ["西游记", index: 0, ...]
console.log(str.match(reg)); // ["西游记", "西游记"]
console.log(str.replace(reg, '红楼梦')); // "红楼梦是四大名著之一,我爱看红楼梦"

二、常用修饰符

修饰符用来调整正则的匹配模式

g：全局匹配（找到所有匹配，而不是在第一个匹配后停止）
i：不区分大小写匹配
m：多行匹配（影响 ^ 和 $ 的行为）

const reg = /you/gi;
const str = 'you是you俺是俺you不是俺俺不是you';
console.log(str.match(reg)); // ["you", "you", "you", "you"]

三、边界符与定位

\b：单词边界（匹配一个单词的开始或结束位置）
^：匹配字符串的开始位置
$：匹配字符串的结束位置

// 匹配独立的单词 "an"
const reg1 = /\ban\b/ig;
const str1 = 'an apple,an ant';
console.log(str1.match(reg1)); // ["an", "an"]

// 匹配以 "ab" 开头的字符串
const reg2 = /^ab/;
console.log(reg2.test("aabab")); // false

// 匹配以 "ab" 结尾的字符串
const reg3 = /ab$/;
console.log(reg3.test("aababb")); // false

// 精确匹配单个字符 "a"
const reg4 = /^a$/;
console.log(reg4.test('a')); // true

四、量词：控制匹配次数

*：匹配前面的字符 0 次或多次
+：匹配前面的字符 1 次或多次
?：匹配前面的字符 0 次或 1 次
{n}：匹配前面的字符 n 次
{n,}：匹配前面的字符至少 n 次
{n,m}：匹配前面的字符 n 到 m 次

// 匹配以 0 个或 1 个 "a" 结尾的字符串
const reg = /a?$/;
console.log(reg.test('a')); // true
console.log(reg.test('aa')); // false

五、字符类与特殊符号

[]：匹配括号内的任意一个字符
-：在 [] 中表示范围，如 [0-9] 匹配数字，[a-z] 匹配小写字母
^：在 [] 开头表示取反，如 [^0-9] 匹配非数字
.：匹配除换行符外的任意单个字符

// 匹配包含 a、b、c 中任意一个字符的字符串
const reg = /[abc]/;
console.log(reg.test("ededfd")); // false

// 匹配非数字字符
const reg5 = /[^0-9]/;
console.log(reg5.test('adad')); // true

六、分组与或操作

()：用于分组，可以将多个字符视为一个整体，也可以捕获匹配内容
|：表示 “或” 关系，匹配其中任意一个表达式

// 日期格式转换：2026-01-30 → 01/30/2026
const data = '2026-01-30';
const reg1 = /^(\d{4})-(\d{2})-(\d{2})$/;
console.log(data.replace(reg1, '$2/$3/$1')); // "01/30/2026"

// 匹配"西游记"或"红楼梦"
const reg2 = /西游记|红楼梦/;
console.log(reg2.test("红楼梦")); // true

七、实战场景演练

手机号脱敏

// 13721333097 → 137****3097
const data1 = '13721333097';
const reg1 = /^(\d{3})(\d{4})(\d{4})$/;
console.log(data1.replace(reg1, '$1****$3'));

密码强度验证

// 验证6-16位字母、数字、下划线
const reg2 = /^\w{6,16}$/;
console.log(reg2.test('aba123456_')); // true
console.log(reg2.test('1234567890?')); // false

16 进制颜色值匹配

// 匹配 #ff0000 或 #0f0 格式
const reg3 = /^#[a-fa-f0-9]{6}$|^#[a-fa-f0-9]{3}$/;
console.log(reg3.test('#ff0000')); // true
console.log(reg3.test('#0f0')); // true

24 小时时间格式验证

// 匹配 00:00 到 23:59 的时间
const reg4 = /^([01]\d|2[0-3]):([0-5]\d)$/;
console.log(reg4.test('23:59')); // true
console.log(reg4.test('25:00')); // false

总结

正则表达式是前端处理字符串、完成表单验证的高效工具，核心采用 /匹配规则/修饰符的字面量格式定义，掌握其基础语法和常用方法是后续实战的前提。
正则的价值在于落地实战，手机号脱敏、密码验证、16 进制颜色匹配、24 小时时间验证等常见场景，均可通过组合正则语法快速实现，且实际开发中可借助可视化工具辅助编写和调试正则，提升效率。

到此这篇关于前端基础知识之正则表达式用法的文章就介绍到这了,更多相关前端正则表达式内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！