快速掌握正则表达式 | 01 掌握最基本的匹配

Posted 2022-07-28 一百个Chocolate

正则表达式真好玩，本篇带你掌握最基本的一些匹配。

JS 中的 RegExp 对象

在 javascript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

详细可以参考 菜鸟教程-正则表达式

在本次以及之后的内容，会通过使用 match() 、exec()、replace()等方法来执行我们编写的正则表达式。

匹配纯文本

直接上例子吧，如下我们是使用字符串的匹配，使用了 match() 方法，而我们写法并不是通过 new RegExp 的做法，而是比较常用的双斜线的方式，如下：

let str = 'The best things in life are free!';
let regExp = /free/;
let res = str.match(regExp);
console.log(res); // Array ["free"]

解释一下如上代码，想必大家对于上文所说的 match() 方法就比较清楚了。

代码的第 1 行就是创建一个纯字符串的文本，代码第 2 行创建了一个 RegExp，编写我们本次的正则表达式，代码第 3 行就是执行我们编写的正则表达式，代码第 4 行打印结果，而 match() 方法检索返回一个字符串匹配正则表达式的结果。

现在，你已经掌握了基本的正则匹配了，是不是比较简单呢？别急，我们继续往后看。

匹配多个结果

根据上一节，你已经掌握了基本的匹配，我们看如下例子：

let str = 'I want to be free, the best thing in life is freedom';
let regExp = /free/;
let res = str.match(regExp);
console.log(res); // Array ["free"]

发现问题没有，这个执行结果只返回了第一个 free 匹配，如果我想要返回所有的匹配结果呢？

直接先给出例子来：

let str = 'I want to be free, the best thing in life is freedom';
let regExp = /free/g;
let res = str.match(regExp);
console.log(res); // Array ["free", "free"]

对比代码即可知道，多了一个 g，联想到英文单词 global，这个 g 是一个修饰符，表示全局匹配，找到所有满足条件的组合，那么问题解决。

字母大小写问题

上文中我们对 free 进行了全局匹配，那再看看如下例子：

let str = 'Free to fly, freedom is our pursuit';
let regExp = /free/g;
let res = str.match(regExp);
console.log(res); // Array ["free"]

发现，我们只返回了对应 free 的匹配，首字母大写的 Free 并没有被匹配到，但有时候我们需要不关注字母的大小写，该怎样呢？

如下例子：

let str = 'Free to fly, freedom is our pursuit';
let regExp = /free/gi;
let res = str.match(regExp);
console.log(res); // Array ["Free","free"]

对比代码就很清楚啦，在原本的全局匹配修饰符上多了一个 i，这个是 ignoreCase 的简称，代表忽略字母的大小写，那么问题解决。

匹配不确定的文本

在上文中，比如我们匹配 free 这个字符串，这里是很清楚知道要匹配这四个字母，但是有时候我们可能需要的是首尾确定但中间部分字符不确定的情况，比如在这段文本中，我们想要匹配 以 f 开头然后 t 结尾的字符串，并且字符串长度是 5 位，需要全局匹配并且忽略大小写。

那么就有三位是不确定的，该怎样匹配呢？

There are really many front-end big guys, learn from you front-end big guys

直接看如下例子：

let str = 'There are really many front-end big guys, learn from you front-end big guys';
let regExp = /f...t/gi;
let res = str.match(regExp);
console.log(res); // Array ["front","front"]

发现我们可以通过 . 用来匹配任意字符，也可以说是匹配我们不确定的字符，问题解决。

匹配特殊的字符

上一小节，我们通过 . 匹配到了不确定的字符，但是会有一个问题，假如我们的文本中本来就有 . 呢？

直接看如下例子吧：

let str = 'The react.js is used by many people';
let regExp = /react\\.js/gi;
let res = str.match(regExp);
console.log(res); // Array ["react.js"]

在本例中 . 不再是为了匹配不确定的字符了，而是我们明确需要匹配的字符。通过 \\ 可以实现效果，这个 \\ 表示转义，转义之后的 . 就失去了原本匹配不确定字符（也可以说是匹配任意字符）的功能了，这个问题就解决了。

结尾

本篇文章就到此结束啦，感谢您的阅读。喜欢我的文章可以点点关注，下次我们还能遇见，关注就是最大的动力啦。

我是「一百个Chocolate」，一位狮子座的程序员，坚持写博客的第 4 年，座右铭：学如逆水行舟，不进则退。