jQuery源码：正则表达式rquickExpr分析

jQuery中有一个大量用到的正则表达式rquickExpr

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

可以文字化为

const rquickExpr = /^(?:#(id选择器名称)|(标签选择器名称)|\.(类选择器名称)$/

其作用是来匹配一些简单的id选择器、标签选择器、类选择器，如：#id、div、.class。
那具体是怎么区分哪些是id选择器，哪些是标签选择器，哪些是类选择器呢？

const rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/;
var match = selector.match(reg);    //selector为传入的选择器
if(match[1]){
    //ID选择器
}else if(match[2]){
    //标签选择器
}else if(match[3]){
    //类选择器
}

注：jQuery源码中用的是exec()方法，exec()和match()的区别是：无论是否为全局模式，exec() 都会把完整的细节添加到它返回的数组中。故这里用match代替exec也可以

为什么可以用上面简单的代码就可以区分呢？我们可以看一下当selector分别为#id、div、.class的匹配输出信息

image.png

match分析

• 在全局模式下，match的返回值为匹配到的所有元素组成的数组，如：

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

• 在非全局模式下，match的返回值为匹配到的元素详细

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

返回值["a", index: 0, input: "ab", groups: undefined]解释：
"a"：与正则表达式相匹配的文本
如果有组的话，这里还会有与 RegExpObject 的第 1~n 个子表达式相匹配的文本（见后）
index: 0：匹配文本的第一个字符的位置
input: "ab"：被检索的字符串
groups: undefined：存储命名捕获组的信息

groups：存储命名捕获组的信息

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

console.log(reg2.exec(str2).groups) 
// => { first: 1, second: 2 }   新的语法支持对这些捕获组进行命名，更方便地获>取某个捕获组的数据

匹配多个组时

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]

上面输出数组里的第二个，第三个元素是"a"， undefined，与(a)匹配的文本返回的是"a"，与(b)匹配的文本返回的是undefined（与 RegExpObject 的第 1~n 个子表达式相匹配的文本）

此时对于正则表达式/(a)|(b)/，有如下规律：

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

这就是区分哪些是id选择器，标签选择器，类选择器的原因了

非获取匹配：?:

?:常宇或选择符|搭配，用来匹配类似a(?:b|c) 可以匹配ab或ac，详情见非正则匹配详解