jQuery中有一個(gè)大量用到的正則表達(dá)式rquickExpr

const rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/

可以文字化為

const rquickExpr = /^(?:#(id選擇器名稱(chēng))|(標(biāo)簽選擇器名稱(chēng))|\.(類(lèi)選擇器名稱(chēng))$/

其作用是來(lái)匹配一些簡(jiǎn)單的id選擇器、標(biāo)簽選擇器、類(lèi)選擇器，如：#id、div、.class。
那具體是怎么區(qū)分哪些是id選擇器，哪些是標(biāo)簽選擇器，哪些是類(lèi)選擇器呢？

const rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/;
var match = selector.match(reg);    //selector為傳入的選擇器
if(match[1]){
    //ID選擇器
}else if(match[2]){
    //標(biāo)簽選擇器
}else if(match[3]){
    //類(lèi)選擇器
}

注：jQuery源碼中用的是exec()方法，exec()和match()的區(qū)別是：無(wú)論是否為全局模式，exec() 都會(huì)把完整的細(xì)節(jié)添加到它返回的數(shù)組中。故這里用match代替exec也可以

為什么可以用上面簡(jiǎn)單的代碼就可以區(qū)分呢？我們可以看一下當(dāng)selector分別為#id、div、.class的匹配輸出信息

image.png

match分析

• 在全局模式下，match的返回值為匹配到的所有元素組成的數(shù)組，如：

"ab".match(/a/g)    //輸出['a']

• 在非全局模式下，match的返回值為匹配到的元素詳細(xì)

"ab".match(/a|c/)    //輸出["a", index: 0, input: "ab", groups: undefined]

返回值["a", index: 0, input: "ab", groups: undefined]解釋?zhuān)?br> "a"：與正則表達(dá)式相匹配的文本
如果有組的話，這里還會(huì)有與 RegExpObject 的第 1~n 個(gè)子表達(dá)式相匹配的文本（見(jiàn)后）
index: 0：匹配文本的第一個(gè)字符的位置
input: "ab"：被檢索的字符串
groups: undefined：存儲(chǔ)命名捕獲組的信息

groups：存儲(chǔ)命名捕獲組的信息

// 命名捕獲組的獲取
let reg1 = /(?<first>\d)(?<second>\d)/
let str2 = '123'

console.log(reg2.exec(str2).groups) 
// => { first: 1, second: 2 }   新的語(yǔ)法支持對(duì)這些捕獲組進(jìn)行命名，更方便地獲>取某個(gè)捕獲組的數(shù)據(jù)

匹配多個(gè)組時(shí)

var match = "ac".match(/(a)|(b)/)
//輸出["a", "a", undefined, index: 0, input: "ac", groups: undefined]

var match = "bc".match(/(a)|(b)/) 
 //輸出["b", undefined, "b", index: 0, input: "bc", groups: undefined]

上面輸出數(shù)組里的第二個(gè)，第三個(gè)元素是"a"， undefined，與(a)匹配的文本返回的是"a"，與(b)匹配的文本返回的是undefined（與 RegExpObject 的第 1~n 個(gè)子表達(dá)式相匹配的文本）

此時(shí)對(duì)于正則表達(dá)式/(a)|(b)/，有如下規(guī)律：

if(match[1]){
    //匹配到了a
}else if(match[2]){
    //匹配到了b
}

這就是區(qū)分哪些是id選擇器，標(biāo)簽選擇器，類(lèi)選擇器的原因了

非獲取匹配：?:

?:常宇或選擇符|搭配，用來(lái)匹配類(lèi)似a(?:b|c) 可以匹配ab或ac，詳情見(jiàn)非正則匹配詳解