快速掌握正则表达式 | 05 单词和字符串匹配的高端操作

Posted 2022-07-28 一百个Chocolate

有时候我们需要匹配特定位置的一些单词，也可以说是字符咯，也可能需要匹配一下特定的字符串等等，那么本篇就带你了解一些高端操作（理解之后其实依旧会觉得很简单）

发现问题

我们直接来看一下下面这个例子吧：

let str = 'The words in the front-end include front and end, is front-end not frontend';
let reg = /front/gi;
let res = str.match(reg);
console.log(res); // ['front', 'front', 'front', 'front']

发现没有，我们会匹配出来四个 front，假如我们只想要匹配具体的单词呢？

比如这个例子中，我们只想匹配到 front 而不是 front-end 以及 front-end。

单词边界

在这里就引入单词边界的概念了，其实也很简单，边界的英文是 boundary，首字母是 b，我们直接看下面例子：

let str = 'The words in the front-end include front and end, is front-end not frontend';
let reg = /\\bfront\\b/gi;
let res = str.match(reg);
console.log(res); //  ['front', 'front', 'front']

发现没有，语法就是 \\b，将我们的想要匹配的单词包住，就像标题一样边界，就只匹配边界之内的即可。

但是我们细看，为啥还是会有三个匹配结果呢，我们知道 frontend 应当不会再匹配了，既然有三个的话，那么 front-end 应该是会匹配到了。

其实，单词字符就是字母、数字和下划线，包含连接符 - 的 front-end 其实算两个单词啦。

下面是我亲测了一下的结果：

let str = 'front front- front@ front# front*';
let reg = /\\bfront\\b/gi;
let res = str.match(reg);
console.log(res); //  ['front', 'front', 'front', 'front', 'front']

可以看出，还有这些也会算单词，应该还有更多的字符，这就自己去发掘啦。

前缀与后缀

刚刚我们使用的是两个 \\b，还可以单独使用，看如下例子：

首先是 \\b 写在前面，我们就可以匹配以之后的字符串为前缀的结果集。

let arr = ['Choco','choco', 'nhoco', 'yhoco', 'hearling'];
let reg = /\\bchoco/gi;
let res = arr.filter(item=>item.match(reg));
console.log(res) // ['Choco', 'choco']

首先是 \\b 写在后面，我们就可以匹配以之后的字符串为后缀的结果集。

let arr = ['Choco','choco', 'nhoco', 'yhoco', 'hearling'];
let reg = /oco\\b/gi;
let res = arr.filter(item=>item.match(reg));
console.log(res) // ['Choco', 'choco', 'nhoco', 'yhoco']

这个是不是也很好理解，我们继续哈。

小写与大写

按照之前的惯例，我们有 \\b，那么还会有 \\B，哈哈，还真有，直接上例子：

let arr = ['Choco','choco', 'nhoco','_oco_','yhoco', 'hearling'];
let reg = /\\Boco\\B/gi;
let res = arr.filter(item=>item.match(reg));
console.log(res) // ['_oco_']

对于 \\B 其实就是 \\b 作用的相反。

字符串边界

刚刚结束了单词边界，我们再来看看字符串边界吧，有了前面基础，这个应该看一遍就行，直接上说明：

对于字符串的开头边界用 ^ 表示，结尾边界用 $ 来表示，诶，这时候就想到 ^ 之前不是元字符取非操作吗，怎么还能当做字符串边界使用？

确实，它有取非的功能，但是是对于字符集合的时候才会（包在 [] 之间的字符）

我们看一个例子好了：

let str = '<div>The words in the front-end include front and end, is front-end not frontend</div>';
let reg = /<\\/div>\\s*$/gi;
let res = str.match(reg);
console.log(res); // ['</div>']

但在实际使用中我发现还是和单词边界有一些区别的，比如这个 ^ 代表的是字符串第一个字符开始找，没找到就没有后续了，而 $ 是从字符串最后一位往前找，也是找后缀，没有的话就没有了。

多行匹配问题

在之前的匹配中，我们都是单行单行匹配的，包括在上面我们对于字符串边界处理的时候，也是单行处理，我们现在想要多行咋办呢？

直接看下面例子：

let str = `front-end is good,
front-end is front-end not frontend`;
let reg = /^front/gi;
let res = str.match(reg);
console.log(res); // ['front']

我们发现只能匹配到第一行的 front，现在想要多行进行匹配。

那么，其实也很简单，就是加一个 m 完事：

let str = `front-end is good,
front-end is front-end not frontend`;
let reg = /^front/gim;
let res = str.match(reg);
console.log(res); // ['front', 'front']

解决~

小结

不知不觉已经坚持输出第五篇博客了，继续努力更新完整个系列~

本小节内容到底就结束啦，感谢各位的阅读，我们期待下一篇吧。