sizzle里面的一些正则分析

来源：互联网发布：大数据先培训后付费编辑：程序博客网时间：2024/06/01 17:33

最近在jquery的选择器,里面有很多正则

拿出来研究研究

这个兄弟早有研究且配了很多图

http://www.cnblogs.com/xesam/archive/2012/02/15/2352471.html

http://www.cnblogs.com/NNUF/archive/2012/07/31/2617084.html

第一个

var chunker = /((?:$(?:\([^()]+$|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g

划分一下可以分成2个

((?:$(?:\([^()]+$|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])

这个很长还是要继续划分de

(\s*,\s*)?

这个好理解块的分隔符呀

在划分一下分成2个第1个还是很长第2个却很清晰了匹配>+~

(

(?:$(?:\([^()]+$|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+

[>+~]

)

然后再把第一个划分下大概可以分成4大块如下

   (?:
       $(?:\([^()]+$|[^()]+)+\)
        \[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]
       \\.
       [^ >+~,(\[\\]+
   )

第一块匹配 ()包括()里面的东西可以是(()) 括号里面套括号在划分一下

  $
       (?:
        \([^()]+$ |
         [^()]+
      )
   \)

第2个正则匹配[] 和里面的东西划分一下

  \[
      (?:
            \[[^[\]]*\]     |
            ['"][^'"]*['"] |
           [^[\]'"]+
       )+
  \]

第3个和第4就比较容易看了

还有就是Expr.match里面的东东了

Expr.match = {
      ID: /#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,
      CLASS: /\.((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,
      NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,
      ATTR: /\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,
     TAG: /^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,
     CHILD: /:(only|nth|last|first)-child(?:$(even|odd|[\dn+-]*)$)?/,
     POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:$(\d*)$)?(?=[^-]|$)/,
     PSEUDO: /:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:$(['"]*)((?:\([^$]+\)|[^\2]*)+)\2\))?/
}

ID匹配 /#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/

正则还是容易看的以#开头后面匹配数字字符串汉字下划线中划线 \.(.表示任意)

看了这个正则后我明白了 id还可以是汉字还可以是\.(.表示任意) 这个没见过

Class匹配 /\.((?:[\w\u00c0-\uFFFF_-]|\\.)+)/

跟ID基本一样只是以.开头 \.中的\表示转义因为.匹配的是任意字符(除换行外)

Name匹配 /\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/

name是属性所以在[]里面然后name的值可能会用' "扩起来所以有['"] 里里面的那个匹配就和ID是一样的了

这个正则其实还是有点问题因为可以匹配[name="userName'] 前面是前面是双引号后面是单引号

还有一个问题是 ['"]* 这个应该是?才对多个的['"]没见到过 (不过也许有是我见识短)

我觉得应该这么写才对 /\[name=(['"]?)((?:[\w\u00c0-\uFFFF_-]|\\.)+)\1\]

Attr匹配 /\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/

attr表示属性的意思也就是属性匹配了这个正则也比较长要划分一下

\[
        \s*
               ((?:[\w\u00c0-\uFFFF_-]|\\.)+)
               \s*
               (?:(\S?=)\s*(['"]*)(.*?)\3|)
        \s*
\]

((?:[\w\u00c0-\uFFFF_-]|\\.)+) 表示属性名

\s* 表示 = 前面的空格 (比较奇怪上面的name等号两边并没有用空格属性为什么要空格了奇怪奇怪!!!!!!!)

(?:(\S?=)\s*(['"]*)(.*?)\3|) 里面的 (\S?=)表示空格和=号 (['"]*)(.*?)\3 里面的 (.*?)表示属性值了 (['"]*)表示是包着属性值的是单引号还是双引号或者没有 \3表示引用前面的那个(['"]*)

Tag 匹配 /^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/

跟id差不多

Child 匹配 /:(only|nth|last|first)-child(?:$(even|odd|[\dn+-]*)$)?/

不知道应该叫什么带了-child的返回的就是一个集合而不是单独的元素了

正则分析

      :
      (only|nth|last|first)
      -child
      (?:
              $
                      (even|odd|[\dn+-]*)
              $
     )?

还是很容易理解的符合伪类的命名规则就行

POS /:(nth|eq|gt|lt|first|last|even|odd)(?:$(\d*)$)?(?=[^-]|$)/

拆分来看也是很容易理解的

/
       :
       (nth|eq|gt|lt|first|last|even|odd)
       (?:$(\d*)$)?
       (?=[^-]|$)
/

PSEUDO /:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:$(['"]*)((?:\([^$]+\)|[^\2]*)+)\2\))?/

个人理解这个正则只是粗化的区分中字符串是不是伪类

匹配：xx (xx)? 大概就是这种形式

/
       :
      (
               (?:
                        [\w\u00c0-\uFFFF_-]|\\.
               )+
      )
     (?:
              $
                      (['"]*)
                     (
                            (?:\([^$]+\)   |
                            [^\2]*)+
                      )
                      \2
                \)
        )?
/