一篇文章带你彻底搞定正则表达式(前端必备)

前言

正则表达式（regular expression）是所有开发者必备的字符串处理神器。表单校验、关键词提取、文本替换、日志解析、数据清洗…… 几乎所有字符串操作都离不开它。

很多人觉得正则难记、难写，其实只要掌握语法规则 + 常用套路，就能轻松搞定 99% 的业务场景。本篇以 javascript 为例，从零到一，带你系统掌握正则表达式

一、正则表达式是什么？

正则表达式是用于匹配字符串中字符组合的模式。简单说：用一串符号规则，快速检查、查找、替换、切割字符串。

作用：

• 表单验证（手机号、邮箱、身份证、密码）
• 字符串提取（数字、链接、关键词）
• 字符串替换（敏感词、格式美化）
• 字符串切割（复杂分隔符）

二、js中创建正则的两种方式

1.字面量形式（推荐）

性能高、写法简洁；适合正则规则固定的场景

const reg = /pattern/modifiers

2.构造函数形式

规则可动态拼接字符串生成；适合规则不确定、需要动态生成的场景

const reg = new regexp('pattern', 'modifiers')

三、修饰符（modifiers）

写在字面量/.../后面、构造函数第二个参数的位置，用来控制匹配模式：  

• i：ignorecase —— 忽略大小写
• g：global —— 全局匹配（找到所有符合条件）
• m：multiline —— 多行匹配
• s：dotall —— 让 . 可以匹配换行符（es2018）
• u：unicode —— 支持 unicode 编码
• y：sticky —— 粘性匹配

最常用：i、g、m

四、正则核心：元字符（必背）

元字符是代表某一类字符，用来匹配对应的字符（多个），放在字面量/.../里面

   .：匹配任意字符（除换行）

   \d：数字 [0-9]

   \d：非数字

   \w：字母 / 数字 / 下划线 [a-za-z0-9_]

   \w：非单词字符

   \s：空格、换行、制表符等空白

   \s：非空白

   ^：开头

   $：结尾

五、量词（控制出现次数）

表示元字符出现的次数，也是放在字面量/.../里面

   *：0 次或多次

   +：1 次或多次

   ?：0 次或 1 次

   {n}：正好 n 次

   {n,}：至少 n 次

   {n,m}：n~m 次

示例：

• /\d+/：匹配一串数字
• /\w{6,12}/：匹配 6~12 位字母数字下划线

六、 范围、排除、分组、或

1. 字符集合 []

• [abc]：匹配 a 或 b 或 c 任意一个
• [a-z]：匹配小写字母
• [a-z]：匹配大写字母
• [0-9]：等价于 \d

2. 排除 ^

• [^abc]：不是 a、b、c 的任意字符

3. 或 |

• a|b：匹配 a 或者 b

4. 分组 ()

• 把多个字符看成一个整体
• 可用于后向引用、提取内容示例：/(abc)+/ 匹配 abc、abcabc、abcabcabc...

七、常用正则方法

1.test()

该方法用来判断是否匹配，（）里面写要判断的字符

^\d表示开头是数字,+表示多个数字，$表示结尾也是数字
/^\d+$/.test('123') // true

2.match()

该方法用来取出字符串里面符合正则表达式的内容，（）里面要写正则表达式

'abc123def456'.match(/\d+/g) // ['123','456']

3.replace()

该方法用来替换符合正则表达式的内容，（）里面放正则表达式和替换后的内容

'hello123'.replace(/\d/g, '*') // 'hello***'

4.split()

该方法按照正则表达式来进行切分，（）里面放正则表达式

'a1b2c3'.split(/\d/) // ['a','b','c']

八、常见例子

1.纯数字校验

/^\d+$/.test('123456') // true

2.手机号校验

 {9}：表示 \d 数字要出现九次

/^1[3-9]\d{9}$/.test('13812345678') // true

3.身份证号码

 [\dxx]：表示可以是\d(数字)、x、x三者之一

/^\d{17}[\dxx]$/.test('11010119900101123x')

4.邮箱校验

/^[\w.-]+@[\w-]+\.[\w.]{2,6}$/

九、正则核心思想

• 精准匹配：尽量用 ^ 和 $ 限定开头结尾，避免误匹配
• 贪婪匹配：默认尽可能多匹配
• 非贪婪匹配：量词后加 ?，如 *?、+?、??
• 分组提取：用 () 分组，match 可以拿到分组内容
• 可读性优先：复杂正则尽量拆分、注释

十、总结

正则表达式就是一套固定的字符串规则：

• 元字符：匹配什么
• 量词：匹配多少次
• 修饰符：怎么匹配
• 方法：test、match、replace、split

掌握这些，你就能轻松搞定：表单校验、数据清洗、关键词提取、日志解析、字符串格式化等几乎所有场景。正则写得多了，自然就熟练了

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