資訊專欄INFORMATION COLUMN
摘要：在中就體現(xiàn)成用正則表達(dá)式進(jìn)行文件名匹配。字符串匹配恩，那么不包括呢顯然，這就需要用到正則的位置匹配了和都是不正確的，匹配前面不是的的位置。參考正則表達(dá)式分鐘入門教程正則表達(dá)式匹配不包含某個(gè)字符串通俗易懂還有圖
問題重現(xiàn)
不知道各位旁友在webpack的使用中，有沒有碰到下面的問題情景：
在使用了css Module的情況下，同時(shí)又希望用一些global的布局，其實(shí)在css Module中直接用
:global(.title) {
color: green;
}
也是可以實(shí)現(xiàn)的，但是如果需要引入第三方css，如Animate.css，如果對每一個(gè)classname都進(jìn)行手動(dòng)的全局定義，工作量可不小。
關(guān)于css的打包問題，對于一些組件的樣式，可以將css打包在js文件中，但是一些全局的css，或者一些需要第一時(shí)間加載的css (如pace.css，在頁面加載過程中就需要第一時(shí)間解析出樣式)，就需要使用ExtractTextPlugin打包成為多帶帶的css文件了。
以上都是需要對于同一類型文件的不同處理。在webpack中就體現(xiàn)成用正則表達(dá)式進(jìn)行文件名匹配。
為了更優(yōu)雅的命名，第一種情景來舉例，我將全局的樣式文件命名成foo.global.less，其他需要進(jìn)行css module處理的則正常命名，如bar.less。
思路在進(jìn)入主題之前，我先分享一個(gè)實(shí)用的在線正則網(wǎng)站refiddle，包含了不僅僅Javascript的正則
下面的重頭戲便是
如何正則匹配*.global.less和*.less(不包括*.global.less)？
眾所周知，webpack中是不存在多次正則匹配的，所以需要分別使用2個(gè)正則表達(dá)式來解決上面兩種字符串的匹配。
*.global.less字符串匹配？恩, so easy，/.global.less$/, 那么*.less(不包括*.global.less)呢？
顯然，這就需要用到正則的位置匹配了((^.global)和[^.global]都是不正確的)，匹配前面不是.global的的位置。
| 分類 | 語法 | 說明 |
|---|---|---|
| 捕獲 | (exp) | 匹配exp,并捕獲文本到自動(dòng)命名的組里 |
| 捕獲 | (? |
匹配exp,并捕獲文本到名稱為name的組里，也可以寫成(?"name"exp) |
| 捕獲 | (?:exp) | 匹配exp,不捕獲匹配的文本，也不給此分組分配組號 |
| 位置匹配 | (?=exp) | 匹配exp前面的位置 |
| 位置匹配 | (?<=exp) | 匹配exp后面的位置 |
| 位置匹配 | (?!exp) | 匹配后面跟的不是exp的位置 |
| 位置匹配 | (? | 匹配前面不是exp的位置 |
| 注釋 | (?#comment) | 這種類型的分組不對正則表達(dá)式的處理產(chǎn)生任何影響，用于提供注釋讓人閱讀 |
如上表，很顯然需要使用(?，所以正則表達(dá)式是/(?，完結(jié)撒花！
但是！真的就這樣可以了嗎？？很不幸的是在js中并沒有實(shí)現(xiàn)(?<=exp)和(?的位置匹配。（可能是大家伙都沒想到Js能走到今天這個(gè)地步，以為只是在瀏覽器上耍耍，數(shù)據(jù)驗(yàn)證沒必要太復(fù)雜吧, ? ）
參看RegExp.
經(jīng)過一番查找和頭腦風(fēng)暴，最終得到了Js中不包含某子串的正則匹配
/^(.(?!.global))+.less$/
(?!.global)匹配的是后面不是.global的位置
(.(?!.global))+匹配的就是若干個(gè)后面跟著不是.global的字符
^字符串首位置不能丟！，如果丟了，/(.(?!.global))+.less$/也能夠匹配foo.global.less，因?yàn)閺?b>foo后面的.開始，后面跟著的就不是.global了。
但是對于.global.less字符串，該正則也無能為力了。
參考正則表達(dá)式30分鐘入門教程
JavaScript RegExp
正則表達(dá)式匹配“不包含某個(gè)字符串” (通俗易懂還有圖！)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81182.html
摘要：以指定模式分割字符串，返回結(jié)果為數(shù)組。為什么牢記，有什么用看代碼查找連續(xù)的相同的數(shù)字或者內(nèi)容是用子表達(dá)式只有字表達(dá)是中匹配的內(nèi)容才保存到緩存，這種行為叫捕獲。 前言 正則表達(dá)式之所以強(qiáng)大，是因?yàn)槠淠軐?shí)現(xiàn)模糊匹配，精確匹配沒有任何價(jià)值。 正則表達(dá)式學(xué)習(xí)筆記 第一章 JavaScript原型對象與原型鏈 1.1 正則表達(dá)式概念 RegExp：是正則表達(dá)式（regular expressio...
摘要：以指定模式分割字符串，返回結(jié)果為數(shù)組。為什么牢記，有什么用看代碼查找連續(xù)的相同的數(shù)字或者內(nèi)容是用子表達(dá)式只有字表達(dá)是中匹配的內(nèi)容才保存到緩存，這種行為叫捕獲。 前言 正則表達(dá)式之所以強(qiáng)大，是因?yàn)槠淠軐?shí)現(xiàn)模糊匹配，精確匹配沒有任何價(jià)值。 正則表達(dá)式學(xué)習(xí)筆記 第一章 JavaScript原型對象與原型鏈 1.1 正則表達(dá)式概念 RegExp：是正則表達(dá)式（regular expressio...
摘要：要執(zhí)行忽略大小寫的檢索，請追加標(biāo)志。八提取字符串的片斷，并在新的字符串中返回被提取的部分。九把字符串分割為字符串?dāng)?shù)組。十一把字符串轉(zhuǎn)換為大寫。十四從起始索引號提取字符串中指定數(shù)目的字符。。子串中的字符數(shù)。新增的操作字符串的方法一 一、charAt() 返回在指定位置的字符。 var str=abc console.log(str.charAt(0))//a 二、charCodeAt(...
摘要：主要知識(shí)點(diǎn)新增的字符串處理方法模板字面量以及正則表達(dá)式上的改動(dòng)深入理解筆記目錄字符串字符串是大原始數(shù)據(jù)類型。如果在字符串的結(jié)束部分檢測到指定文本，返回，否則返回。字符串內(nèi)插入反撇號的方式。 主要知識(shí)點(diǎn)：新增的字符串處理方法、模板字面量以及正則表達(dá)式上的改動(dòng)showImg(https://segmentfault.com/img/bVbfWak?w=861&h=622); 《深入理解E...
摘要：本章主要講個(gè)知識(shí)點(diǎn)，字符串正則表達(dá)式字符串字符串是大原始數(shù)據(jù)類型。提供的標(biāo)準(zhǔn)形式，接受一個(gè)可選的字符串參數(shù)，指明應(yīng)用某種標(biāo)準(zhǔn)形式。如果在字符串中檢測到指定文本，返回，否則。字符串內(nèi)插入反撇號的方式。 相比較于第一章變量的聲明，這一章的內(nèi)容有了一點(diǎn)深度提升，但還不至于很難理解。本章主要講2個(gè)知識(shí)點(diǎn)，字符串、正則表達(dá)式 字符串 字符串（String）是JavaScript6大原始數(shù)據(jù)類型。...
閱讀 1027·2021-09-26 09:55
閱讀 3574·2021-09-24 10:30
閱讀 1374·2021-09-08 09:36
閱讀 2558·2021-09-07 09:58
閱讀 609·2019-08-30 15:56
閱讀 774·2019-08-29 18:32
閱讀 3622·2019-08-29 15:13
閱讀 1847·2019-08-29 13:49
