使用正则表达式找出所有不包含某字符串的行

之前写 Webpack 配置的时候遇到这样一个问题：

通过 /\.(jpg|png|svg|gif|webp)$/ 判断图片文件，如果符合条件则将其储存至 images 目录下。
然而这样做会把类似 fontawesome-webfont.svg 和 glyphicons-halflings-regular.svg 这样的字体文件也匹配进去

这是一个强迫症患者所不能接受的。那么问题来了：如何使用正则式匹配一段文字不包含某个字符串呢？

匹配某段文字不以某字符串结尾

比如需要匹配一段文字不以 some_text 结尾

• 负值字符集合

/.*[^s][^o][^m][^e][^_][^t][^e][^x][^t]$/

比较容易想到的方式。虽然笨了点，但的确是有效的方法。但这样做只能匹配长度≥9的字符串，而且只能判断不以某一个字符串结尾。

• 零宽度负预测先行断言

零宽度负预测先行断言 判断断言出现的位置不匹配某个表达式。

/(?!some_text).{9}$/

该正则式断言最后任意九个字符不是some_text。同样只能匹配长度≥9的字符串。好处是用于断言的字符串是一个表达式，通过 | 可以写任意多组字符串。

• 零宽度负回顾后发断言

零宽度负预测后发断言 判断断言出现的位置之前不匹配某个表达式。它进入 EcmaScript 标准比较晚，Chrome 62 才提供支持。

/(?<!some_text)$/

该正则式断言行尾之前的字符串不是some_text。这样写就对字符串长度没有限制，是最完美的写法，可惜浏览器支持度较差。

• 原生 JS 方法

str.endsWith('some_text')

匹配某段文字不以某字符串开头

比如需要匹配一段文字不以 some_text 开头

• 负值字符集合

/^[^s][^o][^m][^e][^_][^t][^e][^x][^t]/

好想，但同样只能匹配长度≥9的字符串。

• 零宽度负预测先行断言

/^(!some_text)/

匹配行首位置后不出现 some_text。没有字符串长度限制，也没有浏览器兼容性问题。

• 原生 JS 方法

str.startsWith('some_text')

匹配某段文字不包含某字符串

比如匹配某段文字不包含字符串 some_text

• 零宽度负预测先行断言

/^((?!some_text).)*$/

正则式断言该段文字的任意位置都不出现 some_text。这样理解：

/^(?!some_text).(?!some_text).(?!some_text).(?!some_text).(?!some_text).(?!some_text).……$/

• 原生 JS 方法

str.includes('some_text') // ES2016，注意不是 contains
str.indexOf('some_text') >= 0 // 兼容性更好

完