Chunker regular filter analysis in jQuery source code

Chunker regular filter analysis in jQuery source code_jquery

WBOY

Release： 2016-05-16 17:51:14

Original

1049 people have browsed it

Copy code The code is as follows:

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

This is It is the longest regular rule in Jq. I have been studying it for a long time and I have always been confused. I feel that it is easier to understand through debugging and then analyzing the values step by step.

I tried to make the graph more intuitive, so as to The different colors are distinguished, as shown below:

Chunker regular filter analysis in jQuery source code_jquery

Chunker regular filter analysis in jQuery source code_jquery

Group 1 is split into an array one by one through the following code:

Copy code The code is as follows:

 
// The function of the loop here is to split each selector into the parts array, such as div#id>p ul li Split into ['div#id','>','p','ul','li'] 
while ( (chunker.exec(""), m = chunker.exec(soFar)) !== null ) { 
// soFar stores the selector string after filtering the first layer, which is the group three on the picture 
soFar = m[3]; 
//select The first part of the container block is pushed into the array 
parts.push( m[1] ); 
// If split to the comma ',', the previous group ends, jumps out of the loop, and goes to another group of selections 
if ( m[2] ) { 
// Record another set of selectors 
extra = m[3]; 
break; 
} 
} 
 

Others such as ID, class, etc. are easy to understand

Copy code The code is as follows:

 
match: { 
// u00c0-uFFFF matches the alphabetical text of multiple countries or families 
ID: /#((?:[wu00c0-uFFFF-]|\.) ) /, //For example: #myId 
CLASS: /.((?:[wu00c0-uFFFF-]|\.) )/, //For example: .myClass 
NAME: /[name=['" ]*((?:[wu00c0-uFFFF-]|\.) )['"]*]/, //For example: [name="myName"] 
ATTR: /[s*((?:[ wu00c0-uFFFF-]|\.) )s*(?:(S?=)s*(['"]*)(.*?)3|)s*]/, //For example: [attribute=" value"] 
TAG: /^((?:[wu00c0-uFFFF*-]|\.) )/, //For example: div p a 
CHILD: /:(only|nth|last|first) -child(?:((even|odd|[dn -]*)))?/, //For example: :first-child or :nth-child(5n 1) 
POS: /:(nth|eq |gt|lt|first|last|even|odd)(?:((d*)))?(?=[^-]|$)/, //For example: :nth(3) span 
PSEUDO : /:((?:[wu00c0-uFFFF-]|\.) )(?:((['"]?)((?:([^)] )|[^()]*) )2) )?/ // :jlkjkjl('kl(kklk)kl') 
} 

To be continued...