sizzle里面的一些正则分析

迈不过友情╰ 2022-06-07 00:26 125阅读 0赞

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

拿出来研究研究

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

[http://www.cnblogs.com/xesam/archive/2012/02/15/2352471.html][http_www.cnblogs.com_xesam_archive_2012_02_15_2352471.html]

[http://www.cnblogs.com/NNUF/archive/2012/07/31/2617084.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  
                \\)  
        )?  
  /

[http_www.cnblogs.com_xesam_archive_2012_02_15_2352471.html]: http://www.cnblogs.com/xesam/archive/2012/02/15/2352471.html
[http_www.cnblogs.com_NNUF_archive_2012_07_31_2617084.html]: http://www.cnblogs.com/NNUF/archive/2012/07/31/2617084.html