前言
ECMAScript 2018 是 JavaScript 的最新标准,其中新增了一些有趣和实用的语法特性,包括正则表达式的两个新特性:后行断言和后行否定断言。
在这篇文章中,我们将会深入探讨这两个新特性,你会了解到它们的使用场景以及如何在你的前端项目中应用它们。
正则表达式后行断言 (?<=)
在过去的正则表达式中,只有前行断言可以通过 (?=)
这个语法来实现匹配某个位置之前的字符,而无法匹配某个位置之后的字符。
但是在 ECMAScript 2018 引入的后行断言(positive lookbehind) (?<=)
这个语法中,我们可以方便的匹配某个位置之后的字符并返回它,这对于需要在特定条件下匹配某个位置之后的字符的情况非常有用。
一些使用后行断言的实际例子如下:
匹配 HTML 标签之外的文本
假设我们要匹配一段 HTML 中所有 div
标签之外的文本内容,我们可以使用后行断言:
const str = '<div>这是一个 div 标签</div>这是 div 标签之外的文本'; const pattern = /(?<=^<)div/gm; const matches = str.match(pattern); console.log(matches); // ["这是 div 标签之外的文本"]
我们可以将 (?<=^<)
解读为 “匹配一个在行首 <
之后的位置”。
在这个示例中,我们成功匹配到了 div
标签之外的文本内容。
提取 URL 中域名后面的部分
如果想要提取 URL 中域名后面的部分,不仅需要匹配域名,还要匹配域名之后的所有内容,我们可以使用后行断言和 JavaScript 的 string.match() 方法来完成:
const url = 'https://www.baidu.com/s?wd=javascript'; const pattern = /(?<=\.com).*/g; console.log(url.match(pattern)); // ["s?wd=javascript"]
在这个示例中,我们成功匹配到了 URL 中 .com
后面的部分 s?wd=javascript
。
后行否定断言 (?<!)
与后行断言不同,后行否定断言(negative lookbehind) (?<!)
可以匹配某个位置之前的所有字符,这个语法如下所示:
/(?<!pattern)/
它可以用来对某个位置之前的字符串是否符合特定的规则进行检测,一些实际的例子包括:
匹配 class
属性以外的所有样式规则键和值
在某些情况下,我们需要匹配 CSS 中 class
属性之外的所有样式规则键和值,这时我们可以借助后行否定断言来实现:
const css = '.selector { font-size: 12pt; } .selector2 { background: #333; }'; const pattern = /(?<!class\s*)[^:{}]+:[^:{}]+(?=;)/g; console.log(css.match(pattern)); // ["font-size: 12pt", "background: #333"]
在这个示例中,我们成功匹配到了 CSS 代码中 class
属性以外的所有样式规则键和值。
匹配日期格式中不包含星期的 MM/DD/YYYY
如果想要匹配日期格式中不包含星期的 MM/DD/YYYY,我们可以使用后行否定断言来匹配:
const pattern = /(?<!Sunday|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday)\d{2}\/\d{2}\/\d{4}/g; console.log('Today is 02/15/2022, Valentine\'s Day!'.match(pattern)); // ['02/15/2022']
在这个示例中,我们成功匹配到了日期格式中不包含星期的部分 02/15/2022
。
结论
在 ECMAScript 2018 中引入的正则表达式后行断言和后行否定断言为我们提供了一个处理匹配某个位置之后或之前的内容的机会。
这两个新特性给了前端开发者一个新的工具来更高效地处理文本匹配操作。希望这篇文章可以让你更好的理解它们的使用方法,并为你的前端项目带来更好的效率和功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6772220b6d66e0f9aad4f0d6