本文正在参加「金石计划 . 瓜分6万现金大奖」

正则表达式-基础

前言

相信很多小伙伴，在平时在项目中，或多或少会接触到 正则表达式

例如给输入框添加限制，只让输入 任意数字 或者 正整数 或者 正小数 等等之类的限制

又或者现在因为疫情，还需要登记每个人的体温，对输入的 体温的数值 做限制

又或者常见的 姓名必须中文字符，手机号校验，身份证校验，邮箱校验，图片格式校验

如果我们只是通过 if else 来做判断，恐怕难以招架产品们 "层出不穷" 的想法。

所以这里会从基础慢慢到进阶，详细的讲解 正则表达式，让小伙伴们搞懂，并破解此类问题！

1.元字符

首先是 元字符，这是最基本的，是组成 正则表达式 的核心，我们必须知道

字符	全拼	含义
.		匹配除了换行符 `\n` 以外，任意字符
^		匹配字符串的开头
$		匹配字符串的结尾
\d	digit	匹配数字
\w	word	匹配字母、数字、下划线( _ )、中文
\s	space	匹配空白字符 ==> 空格、tab、制表符 \t、换行符 \n
\b	bounds	匹配单词边界（这个比较抽象，需要详细说）

可以观察到 后四行，全是小写的字符

2.取反

对于取反，其实本身也是 元字符

字符	全拼	含义
\D	digit	匹配非数字的任意字符 ==> 不是数字就行
\W	word	匹配非字母、非数字、非下划线( _ )、非中文的任意字符 ==> 也就剩下符号了
\S	space	匹配非空白字符 ==> 非空格、非tab、非制表符 \t、非换行符 \n 的任意字符
\B	bounds	匹配非单词边界（非单词的开头和结尾）

可以看到取反的这个操作，其实就是对上面 元字符 当中的后四行进行大写

其实取反还有一个是 [^] 这种形式，也是取反。

3.重复

字符	含义
*	重复 0次或者更多次 ===> >=0
+	重复至少 1次或者更多次 ===> >=1
?	重复 0次或者 1次 ===> 0或1
{n}	重复 n次 ===> =n
{n,}	重复至少 n次，不上限 ===> >=n
{min,max}	重复 min次至 max次，是一个范围

重复操作，这个还是很容易理解的

4.转义

可以看到我们上面用到了很多字符，例如 . ^ $ * + ? 等等

但如果我们仅仅只是想匹配这些字符文本，而不是让这些字符产生含义

那么我们就需要进行转义字符 \ 来帮助

\. 匹配 .
\^ 匹配 ^
\$ 匹配 $
\* 匹配 *
\+ 匹配 +
\? 匹配 ?
\( 匹配 (
\) 匹配 )
\{ 匹配 {
\} 匹配 }
...

5.正则表达式

可以看到上面，我们写的都是一个一个字符，并没有尝试组合起来，写成一个 正则表达式

那么我们就来写一个最简单的 正则表达式 的例子

匹配一个字符串中，是否拥有至少一个数字

/\d+/

我们一步一步分析这个 正则表达式

可以看到最左边和最右边的 / 字符

通过这两个 / 字符，来包裹着我们所写的 正则内容
里面的内容为 \d+

我们知道 \d 是什么意思，为匹配数字

我们也知道 + 是什么意思，匹配至少一次

两个组合起来就是匹配 数字至少一次

总结

通过上面的例子，我们简单总结一下

我们写一个 正则表达式，需要两个 / 包裹，而进行书写的匹配的 正则内容 则是在 /.../ 之间

6.修饰符

修饰符 modifier 它是放在 正则表达式 的最右侧，是用来更进一步添加匹配所需的规则。

可以看下书写的方式： /\d+/modifier

字符	全拼	含义
i	ignore	匹配的时候，不区分大小写
g	global	全局的意思，将所有符合条件的都记录下来。若没有g字符，则只返回第一个符合条件的
m	multiline	多行匹配，通常情况下，总会和元字符的 ^ 和 $ 配合使用
s	singleline	启用 `dotall` 模式，允许点 `.` 匹配换行符 \n
u	unicode	开启完整的 `unicode` 支持

当然不止上面这几个 修饰符，还有好多 y、x、a、d、e 很多 修饰符，不过平时上面的几个 修饰符，足够应对大多数场景了。有兴趣的小伙伴，可以看下哈！

通过上面，我们知道可以写成 /\d+/g、/\d+/i 等等这种格式。

当然还可以进行组合写法，例如

全局下匹配，并且忽略大小写 /\d+/gi

这里面很多 修饰符，其实都需要例子的讲解才能真正明白，我这里不会单独对每个 修饰符 做讲解，但是我会在下面的各种例子中，穿插着这些 修饰符 来一步一步的讲透彻！

现在我们还不知道 正则表达式 有哪些方法，不知道如何下手操作，接下来我会讲解下 正则表达式 的方法

7.正则函数方法

既然我们写出了 正则表达式 以及 修饰符，那我们肯定要做事，要使用的，所以肯定需要一些方法来协助我们操作

这里说一下，正则 RegExp 它拥有哪些方法 RegExp.prototype

从上图，可以看到有 4 个主要的方法，这里将三个常用的 test 、 toString 和 exec

7.1 test() 方法

平常我们使用 test 方法比较多，这个 test 的作用，就是判断是否能够匹配出来，得到的值只有 true 或 false ，写法如下：

这里还是上面的例子

const reg = /\d+/
const str = 'fe@af123fe^*$#af,45f,67'
const str2 = 'feafae.|^&*fea'
const str3 = '1f'

reg.test(str) // true
reg.test(str2) // false
reg.test(str3) // true

可以看到，只要里面至少有一个数字，就会被匹配到

注意书写的格式，因为 test 方式是 RegExp 拥有的

所以使用起来是 RegExp.test(str)

7.2 toString() 方法

toString() 这个方法，其实小伙伴们并不陌生，很多对象中都有这个方法，所以这里我们看下对于 正则表达式 来说，将它转成字符串，长什么样。

const reg = /\d+/

reg.toString()  // '/\\d+/'

可以观察到，它会将我们富有含义的 反斜杠 \ 进行一次转义操作，最终得到的结果是一个字符串。

7.3 exec() 方法

这个 exec 方法，描述起来较为复杂

我这里直接上例子，然后来解释，会更容易理解

例子1

const reg = /\d+/
const str = 'wzms123wzms9,456wzms,789'
const result = reg.exec(str)
console.log(result)

通过结果可以观察到，返回的 result 结果，是一个数组，并且只会匹配到 第一个 符合条件的值

那我们来分析一下这个返回的结果 result 数组

首先是一个数组，我们首先看 length，可以观察到，其实这个数组，其实只有一个值 length:1

那说明了什么 result[0] 的结果为 123
那你看到有 groups 、index、input 这些属性 key，可能会疑问数组里面怎么会有key:value,怎么产生的？

要知道数组也是对象的一种，我们可以通过下面的方式将其添加属性！

明白了之后，那我们接下来说一下这几个的含义
- index 就是匹配到的第一个字符的下标
- input 就是传入的 str
- groups 其实是组的意思，后面我们会在进阶部分说道组的概念，目前先不关心它

例子2

我们修改一下 str 的值

const str = 'wzmsfeaofnvnreger'
const reg = /\d+/
const result = reg.exec(str)

可以看到如果匹配不到的话，它的返回的结果是 null

总结

总结一下， RegExp 的 exec 方法

在匹配成功的条件下，只能匹配到第一个符合条件的值，并且返回的值是一个数组

如果没有匹配成功，那么返回的值为 null

下部分内容

手摸手快速入门正则表达式 (方法)🛫

手摸手快速入门 正则表达式 (基础)🛫