Javascript正则匹配不含某子串

问题重现

不知道各位旁友在webpack的使用中，有没有碰到下面的问题情景：

在使用了css Module的情况下，同时又希望用一些global的布局，其实在css Module中直接用

:global(.title) {color: green;
}

也是可以实现的，但是如果需要引入第三方css，如Animate.css，如果对每一个classname都进行手动的全局定义，工作量可不小。

关于css的打包问题，对于一些组件的样式，可以将css打包在js文件中，但是一些全局的css，或者一些需要第一时间加载的css (如pace.css，在页面加载过程中就需要第一时间解析出样式)，就需要使用ExtractTextPlugin打包成为单独的css文件了。

以上都是需要对于同一类型文件的不同处理。在webpack中就体现成用正则表达式进行文件名匹配。

为了更优雅的命名，第一种情景来举例，我将全局的样式文件命名成foo.global.less，其他需要进行css module处理的则正常命名，如bar.less。

思路

在进入主题之前，我先分享一个实用的在线正则网站refiddle，包含了不仅仅Javascript的正则

下面的重头戏便是
如何正则匹配*.global.less和*.less(不包括*.global.less)？

众所周知，webpack中是不存在多次正则匹配的，所以需要分别使用2个正则表达式来解决上面两种字符串的匹配。

*.global.less字符串匹配？恩, so easy，/\.global\.less$/, 那么*.less(不包括*.global.less)呢？

显然，这就需要用到正则的位置匹配了((^\.global)和[^\.global]都是不正确的)，匹配前面不是.global的的位置。

分类	语法	说明
捕获	`(exp)`	匹配exp,并捕获文本到自动命名的组里
捕获	`(?<name>exp)`	匹配exp,并捕获文本到名称为name的组里，也可以写成(?'name'exp)
捕获	`(?:exp)`	匹配exp,不捕获匹配的文本，也不给此分组分配组号
位置匹配	`(?=exp)`	匹配exp前面的位置
位置匹配	`(?<=exp)`	匹配exp后面的位置
位置匹配	`(?!exp)`	匹配后面跟的不是exp的位置
位置匹配	`(?<!exp)`	匹配前面不是exp的位置
注释	`(?#comment)`	这种类型的分组不对正则表达式的处理产生任何影响，用于提供注释让人阅读

如上表，很显然需要使用(?<!exp)，所以正则表达式是/(?<!global)\.less$/，完结撒花！

但是！真的就这样可以了吗？？很不幸的是在js中并没有实现(?<=exp)和(?<!exp)的位置匹配。（可能是大家伙都没想到Js能走到今天这个地步，以为只是在浏览器上耍耍，数据验证没必要太复杂吧, ? ）
参看RegExp.

经过一番查找和头脑风暴，最终得到了Js中不包含某子串的正则匹配
/^(.(?!\.global))+\.less$/

(?!\.global)匹配的是后面不是.global的位置
(.(?!\.global))+匹配的就是若干个后面跟着不是.global的字符
^字符串首位置不能丢！，如果丢了，/(.(?!\.global))+\.less$/也能够匹配foo.global.less，因为从foo后面的.开始，后面跟着的就不是.global了。

但是对于.global.less字符串，该正则也无能为力了。

参考

正则表达式30分钟入门教程
JavaScript RegExp
正则表达式匹配“不包含某个字符串” (通俗易懂还有图！)

Javascript正则匹配不含某子串相关推荐

JavaScript正则匹配
\d可以匹配一个数字 \w可以匹配一个字母或数字 '00\d'可以匹配'007',但无法匹配'00A': '\d\d\d'可以匹配'010': '\w\w'可以匹配'js': .可以匹配任意字符,所以 ...
JavaScript 正则匹配中英文姓名
工作中突然想给姓名输入框加入正则匹配的验证,以防止用户输入的姓名比网络昵称还奇葩,结果还真费了不少功夫. 首先我们确认规则: ①中英文文字不能混杂 ②汉字不能夹杂任何特殊字符和空格(如果要兼容少数民族 ...
JavaScript正则匹配多行内容
需求: 通过正则匹配给定代码块中的链接和标题刚开始是通过以下正则匹配的, 尝试之后匹配失败 let reg = /<a href="(.*?)" class="& ...
javascript 正则匹配
正则表达式时构成搜索模式的字符序列,当需要搜索文本中的数据,可以通过搜索模式来描述要搜索的内容. 常用的正则pattern: []: 方括号之间表示任何字符,[0-9] 任何0-9的数字 ():代表 ...
JavaScript 正则匹配的 Unicode 模式
疑惑的 unicode 模式前两天室友正在看 js 关于正则表达式的博客,发现 js 正则表达式中有个 u,可以用于开启 unicode 模式,并且被博客举的两个例子搞懵了,例子如下: /^\uD8 ...
javascript正则匹配邮箱
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email) test() 方法用于检测一个字符串是否匹配某个模式. 如果字符串中有匹配的值返 ...
Javascript正则匹配HTML字符串
在前台处理字符串时,有时并不需要动态拼接字符串,某一部分的字符串可能是固定的,因此在开发过程中我们可以利用正则表达式将html元素匹配出来.如下: var html = (function(){/*& ...
JavaScript 正则匹配字符串中 base64 图片
通常,富文本编辑器中的图片插入后上传到服务器保存,提交到数据库的富文本内容只包含图片的http地址. 但是,提交时候也需要做一下正则校验,避免有时候由于图片上传服务器失败而直接保存base64 格式图 ...
JavaScript正则匹配中拿到括号的值
// 匹配[]括号的值并去重 export const regSquare = (str: string) => {const regex = /(?<=\[).+?(?=\])/g; ...

Javascript正则匹配不含某子串

问题重现

思路

参考

Javascript正则匹配不含某子串相关推荐

最新文章

热门文章