一文彻底搞懂JavaScript正则表达式

正则表达式的概述

什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式被视为一种对象类型。

正则表达式的作用

• 正则表达式通常用于检索和替换符合特定模式（规则）的文本。例如，在开发登录注册功能时，利用正则表达式对用户名和密码进行字符类型或长度的限制，实现表单验证（匹配）。
• 此外，正则表达式常用于过滤页面内容中的敏感词汇。例如，在游戏聊天或社交媒体中，将不当言论替换为星号（***）或表情符号（替换）。
• 正则表达式还能从字符串中提取所需的部分。例如，在电商平台搜索框输入关键词时，系统会弹出相关提示词（提取）。

正则表达式的特点

1. 具有极高的灵活性、逻辑性和功能性。
2. 能够以极其简洁的方式实现复杂的字符串控制。
3. 对于初学者而言，其语法较为晦涩难懂，这是其主要缺点。
4. 在实际开发中，通常采用“拿来主义”，直接复制调用现成的正则表达式。但理解其原理至关重要，以便在必要时进行简单的修改和调整。

正则表达式在JavaScript中的使用

创建正则表达式

在JavaScript中，可以通过两种主要方式创建正则表达式。

第一种方式是利用 RegExp 对象来创建。

let regexp = new RegExp(/123/);
    console.log(regexp); //  /123/

第二种方式是使用字面量创建（推荐使用这种方式）。

let rg = /123/
    console.log(rg); //  /123/

测试正则表达式 test

虽然前文介绍了正则表达式的创建方法，但在实际应用中，核心在于匹配正则表达式。为此，引入了 test 方法。

test() 是正则对象的一个方法，用于检测字符串是否符合该规则。该方法返回布尔值 true 或 false，其参数为待测试的字符串。

代码书写:regexObj.test(str)

1. regexObj 是我们编写的正则表达式。

2. str 是我们要测试的文本字符串。

该操作旨在检测 str 文本是否符合我们所写的正则表达式规范。

let rgp = /123/
        console.log(rgp.test(123));  // true

正则表达式中的特殊字符

正则表达式的组成

一个正则表达式可以由简单的字符构成，例如 /abc/，也可以是简单字符和特殊字符的组合，例如 /ab*c/。其中特殊字符也被称为元字符，在正则表达式中具有特殊意义，如 ^、&、+ 等。

特殊符号链接直达 ===> 🔔正则表达式mdn🔔

边界符

正则表达式中的边界符用来提示 字符所在的位置，主要有两个字符。

在上述创建正则表达式的内容中，如果我们仅仅采取 /abc/ 这种没有特殊符号的方式，会发生一些情况：

let rg = /123/
        console.log(rg.test(123));  //true
        console.log(rg.test(11234));  //true

我们可以发现，当测试的内容只要包含正则表达式中的字符，都会打印出 true。如果我们想设置以 123 开头的字符串，就需要使用特殊符号了！

let reg = /^abc/
        console.log(reg.test('abc')); //true
        console.log(reg.test('aabce')); //false
        console.log(reg.test('aaabcc')); //false

通过以上方式，我们限制了测试的字符串必须符合以 abc 开头的规范，所以下方两行会返回 false。当你需要精确匹配的时候，你可以通过控制开头和结尾实现。

let regs = /^abc$/
        console.log(regs.test('abc')); //true
        console.log(regs.test('abcd')); //false

该代码表示，测试的字符串必须是 abc，其余的都会打印 false。

字符类

在实际开发过程中，我们不可能只匹配一连串的固定字符，我们需要的功能是只要满足限制即可随意匹配，字符类就可以解决这个问题。字符类：表示有一系列的字符可以选择，只要匹配其中一个就可以了，符号为 []。

举例：let rg = /[abc]/，表示只要测试字符串满足包含 a 或包含 b 或包含 c 就返回 true。

我们可以加上特殊字符：let reg = /^[abc]$/，表示你的测试字符串只能是 a 或者 b 或者 c！

如果你想匹配一个范围内的字符串可以使用特殊符号 [-]。

举例：let reg = /^[A-z]$/，表示 26 个英语字母任何一个字母（大小写均可），都会返回 true，但只能是其中的一个！

• 字符组合。我们可以设置更有灵活性的正则表达式 let rg = /^[A-z0-9_-]$/，表示 26 个英语字符、个位数字、两个符号任意一个都会打印 true。
• 字符类中的 ^ 符号。我们知道 ^ 符号在外部表示从谁开始的意思，但是一旦它也出现在字符类 [] 中，则表示取反的意思！举例:let rg = /^[^A-z0-9_-]$/，第一个 ^ 表示从谁开始，第二个 ^ 表示对这个正则规范取反操作，如：不能是 26 个字母中的任意一个等。

量词符

量词符顾名思义就是与数量有关，这时你就要想一想它跟字符类的结合使用咯！量词符用来设定某个模式出现的次数。

量词说明：* 重复零次或多次；+ 重复一次或更多次；? 重复零次或一次；{n} 重复 n 次，n 是一个正整数，匹配了前面一个字符刚好出现了 n 次；{n,} 重复 n 次或更多次，n 是一个正整数，匹配前一个字符至少出现了 n 次；{n,m} 重复 n 到 m 次，如果 n 或者 m 的值是 0，这个值被忽略。

* 的使用

* 相当于 >=0，可以出现 0 次或者很多次。

let rg = /^a*$/，表示，a 可以出现 0 次或者多次。

let rg = /^a*$/;
        console.log(rg.test('')); //true
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //true

+ 的使用

相当于 >=1，可以出现一次或多次。

let rg = /^a+$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //true

? 的使用

相当于 1 || 0。

let rg = /^a?$/;
        console.log(rg.test('')); //true
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //false

{n} 的使用（重点掌握）

let rg = /^a{3}$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //false
        console.log(rg.test('aaa')); //true

在这里表示字符串 a 重复了三次。

{n,} 的使用（重点掌握）

let rg = /^a{3,}$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //false
        console.log(rg.test('aaa')); //true
        console.log(rg.test('aaaaa')); //true

在这里表示字符串 a 必须要重复三次以及以上，否则打印 false。

{n,m} 的使用（重点掌握）

let rg = /^a{3,16}$/;
    console.log(rg.test('')); //false
    console.log(rg.test('aaa')); //true
    console.log(rg.test('aaaaaaaaaaaaaaaaaaaaaaaaaaa')); //false

在这里表示字符串 a 重复的区间是大于等于 3 并且小于等于 16。

结合某个模式应用

let reg = /^[A-z0-9_-]{3,16}$/
        console.log(reg.test('1018703239')); // true
        console.log(reg.test('101a24543_q')); //true

这个正则表达式其实就可以用来写用户名的表单验证了！

括号总结

• 大括号 {}：是量词符，表示重复的次数。
• 中括号 []：是字符集合，表示匹配方括号中的任意字符。
• 小括号 ()：表示优先级！

预定义类

预定义类指的是某些常见模式的简写方式（简化之前的写法！）。

举例：

我们在这里做一个需求，验证座机号码，座机号码有两种形式 010-12345678 或者 0530-1234567。

（注：正则表达式中的或者符号为：|）。

let reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
        console.log(reg.test('010-12345678')); //true
        console.log(reg.test('0500-1234567')); //true

正则表达式的替换

1. replace 替换

replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串也可以是一个正则表达式。

写法：stringObj.replace(regexp/substr,replacement)

• 第一个参数：被替换的字符串或正则表达式。
• 第二个参数：替换为的字符串。
• 返回值是一个替换完毕的新字符串。

2. 正则表达式参数

/表达式/[switch]（switch 也称为修饰符）按照什么模式来匹配，有三种常用的值：g：全局匹配；i：忽略大小写；g + i：全局匹配 + 忽略大小写。

案例：

<body>
<textarea cols="30" rows="10" class="one"></textarea>
<div class="t"></div>
<script>
    let text = document.querySelector('.one')
    let ts = document.querySelector('.t')
    text.onblur = function () {
        ts.innerHTML = text.value.replace(/星星币|牛哇/g, '**')
    }
</script>

在这里就可以看到正则整体替换的效果了！

开发中常用正则表达式

• Email 地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
• 手机号码：^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
• 国内座机电话号码 (0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
• 身份证号 (15 位、18 位数字)，最后一位是校验位，可能为数字或字符 X：(\d{15}$)|(^\d{18}$)|(\d{17}(\d|X|x)$)
• 帐号是否合法 (字母开头，允许 5-16 字节，允许字母数字下划线)：1[a-zA-Z0-9_]{4,15}$
• 密码 (以字母开头，长度在 6~18 之间，只能包含字母、数字和下划线)：2\w{5,17}$
• 日期格式：^\d{4}-\d{1,2}-\d{1,2}
• 腾讯 QQ 号：[1-9][0-9]{4,} (腾讯 QQ 号从 10000 开始)

小结

前端的学习开发过程中正则表达式是必须要掌握的，在开发中登录注册，以及敏感词汇的替换都需要正则表达式的作用，正则表达式上手非常的容易，在这篇文章中更多的去解析正则表达式文档的 api，api 有更加详细的大家可以认真去看一下，这篇文章可以让你解决绝大多数正则表达式的问题！

到此这篇关于彻底搞懂 JavaScript 正则表达式的文章就介绍到这了，更多相关 js 正则表达式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！