摘要：在中就体现成用正则表达式进行文件名匹配。字符串匹配恩，那么不包括呢显然，这就需要用到正则的位置匹配了和都是不正确的，匹配前面不是的的位置。参考正则表达式分钟入门教程正则表达式匹配不包含某个字符串通俗易懂还有图
问题重现
不知道各位旁友在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,并捕获文本到自动命名的组里 |
| 捕获 | (? |
匹配exp,并捕获文本到名称为name的组里，也可以写成(?"name"exp) |
| 捕获 | (?:exp) | 匹配exp,不捕获匹配的文本，也不给此分组分配组号 |
| 位置匹配 | (?=exp) | 匹配exp前面的位置 |
| 位置匹配 | (?<=exp) | 匹配exp后面的位置 |
| 位置匹配 | (?!exp) | 匹配后面跟的不是exp的位置 |
| 位置匹配 | (? | 匹配前面不是exp的位置 |
| 注释 | (?#comment) | 这种类型的分组不对正则表达式的处理产生任何影响，用于提供注释让人阅读 |
如上表，很显然需要使用(?，所以正则表达式是/(?，完结撒花！
但是！真的就这样可以了吗？？很不幸的是在js中并没有实现(?<=exp)和(?的位置匹配。（可能是大家伙都没想到Js能走到今天这个地步，以为只是在浏览器上耍耍，数据验证没必要太复杂吧, ? ）
参看RegExp.
经过一番查找和头脑风暴，最终得到了Js中不包含某子串的正则匹配
/^(.(?!.global))+.less$/
(?!.global)匹配的是后面不是.global的位置
(.(?!.global))+匹配的就是若干个后面跟着不是.global的字符
^字符串首位置不能丢！，如果丢了，/(.(?!.global))+.less$/也能够匹配foo.global.less，因为从foo后面的.开始，后面跟着的就不是.global了。
但是对于.global.less字符串，该正则也无能为力了。
参考正则表达式30分钟入门教程
JavaScript RegExp
正则表达式匹配“不包含某个字符串” (通俗易懂还有图！)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81182.html
摘要：以指定模式分割字符串，返回结果为数组。为什么牢记，有什么用看代码查找连续的相同的数字或者内容是用子表达式只有字表达是中匹配的内容才保存到缓存，这种行为叫捕获。 前言 正则表达式之所以强大，是因为其能实现模糊匹配，精确匹配没有任何价值。 正则表达式学习笔记 第一章 JavaScript原型对象与原型链 1.1 正则表达式概念 RegExp：是正则表达式（regular expressio...
摘要：以指定模式分割字符串，返回结果为数组。为什么牢记，有什么用看代码查找连续的相同的数字或者内容是用子表达式只有字表达是中匹配的内容才保存到缓存，这种行为叫捕获。 前言 正则表达式之所以强大，是因为其能实现模糊匹配，精确匹配没有任何价值。 正则表达式学习笔记 第一章 JavaScript原型对象与原型链 1.1 正则表达式概念 RegExp：是正则表达式（regular expressio...
摘要：要执行忽略大小写的检索，请追加标志。八提取字符串的片断，并在新的字符串中返回被提取的部分。九把字符串分割为字符串数组。十一把字符串转换为大写。十四从起始索引号提取字符串中指定数目的字符。。子串中的字符数。新增的操作字符串的方法一 一、charAt() 返回在指定位置的字符。 var str=abc console.log(str.charAt(0))//a 二、charCodeAt(...
摘要：主要知识点新增的字符串处理方法模板字面量以及正则表达式上的改动深入理解笔记目录字符串字符串是大原始数据类型。如果在字符串的结束部分检测到指定文本，返回，否则返回。字符串内插入反撇号的方式。 主要知识点：新增的字符串处理方法、模板字面量以及正则表达式上的改动showImg(https://segmentfault.com/img/bVbfWak?w=861&h=622); 《深入理解E...
摘要：本章主要讲个知识点，字符串正则表达式字符串字符串是大原始数据类型。提供的标准形式，接受一个可选的字符串参数，指明应用某种标准形式。如果在字符串中检测到指定文本，返回，否则。字符串内插入反撇号的方式。 相比较于第一章变量的声明，这一章的内容有了一点深度提升，但还不至于很难理解。本章主要讲2个知识点，字符串、正则表达式 字符串 字符串（String）是JavaScript6大原始数据类型。...
阅读 1015·2021-09-26 09:55
阅读 3555·2021-09-24 10:30
阅读 1363·2021-09-08 09:36
阅读 2552·2021-09-07 09:58
阅读 602·2019-08-30 15:56
阅读 764·2019-08-29 18:32
阅读 3592·2019-08-29 15:13
阅读 1840·2019-08-29 13:49
