Interesting titles, one from re and one from CSS.

The former is a re assertion and the latter is a CSS selector.

What is re used for? Matches the character.

What is a selector used for? Matches the element.

Since both are used to “match”, it should not be surprising if there are some similarities between the two.

I found (? <=p) has a strong similarity to :nth-child().

Let me take my time here.

This article assumes that the reader is more familiar with CSS selectors, so the following examples are CSS first, then re.

1. Match all elements

Let’s say there are nine Li’s on the page and make the words of all elements red. We won’t use :nth-child here, just use the label selector.

li{
    color: red;
}
Copy the code

(? <=p) 

'123456789'.replace(/./g.The '*') 
/ / "* * * * * * * * *"
Copy the code

2. Match the first element

To match the first element, use the :first-child selector in CSS:

li:first-child{
    color:red;
}
Copy the code

^ 

'123456789'.replace(/^./g.The '*') 
/ / "* 23456789"
Copy the code

We know that first-child is a special case of nth-child:

li:nth-child(1){
    color:red;
}
Copy the code

Similarly, re can also be used with (? < = p) :

'123456789'.replace(/ (? <=^)./g.The '*') 
/ / "* 23456789"
Copy the code

(? The <=^) assertion actually matches a position, the position after ^, of course, at the beginning. You can refer to the JS regular mini-book for location explanation.

3. Match the third element

The CSS should match the third element :nth-child(3)

li:nth-child(3){
    color:red;
}
Copy the code

3
2 

 '123456789'.replace(/ (? <=^.{2})./g.The '*') 
 12 * 456789 "/ /"
Copy the code

4. Match the first three elements

We know that the nTH-Child selector is awesome because it supports an+b expressions, such as matching the first three:

li:nth-child(-n+3){
    color:red;
}
Copy the code

0
2 

 '123456789'.replace(/ (? < = ^.} {0, 2). / g.The '*') 
 / / "* * * 456789"
Copy the code

5. Match the odd digits

CSS uses 2n+1:

li:nth-child(2n+1){
    color:red;
}
Copy the code

0
2
4 

 '123456789'.replace(/ (? <=^(.{2})*)./g.The '*') 
 / / "* 2 * 4 * 6 * 8 *"
Copy the code

Similar matching digits, i.e. characters to match are preceded by 1, 3, 5… Characters:

 '123456789'.replace(/ (? < = ^ (.). (.{2})*)./g.The '*') 
 / / "1 * 3 * 5 * 7 * 9"
Copy the code

6. The more general an+b

For example, CSS uses 4N +3

li:nth-child(4n+3){
    color:red;
}
Copy the code

The regular side becomes:

 '123456789'.replace(/ (? <=^(.{4})*.{2})./g.The '*') 
 12 * 456 * 89 "/ /"
Copy the code

That is, there are 4N +2 characters before the character to be matched

7. (? = p) with: the NTH – last – the child

We know nth-Child and nth-last-Child. Nth-child = nth-child = nth-child = nth-child = nth-child

li:nth-last-child(-n+3){
    color:red;
}
Copy the code

(? <=p)
p
(? =p)
p
3 

 '123456789'.replace(/. (? } =. {0, 2 $)/g.The '*') 
 / / "123456 * * *"
Copy the code

More, similar to the previous ones, I won’t write it here.

8. (? <! P) and: not child ()) (: NTH –

In CSS, to match all elements except the third element, you can use the :not selector to implement “complement”.

li:not(:nth-child(3)){
    color:red;
}
Copy the code

(? <=p)
p
(? <! p)
p
p 

 '123456789'.replace(/ (? 
      .The '*') 
 / / "3 * * * * * * * *"
Copy the code

9. :nth-child(n+3):nth-child(-n+7)

:nth-child In addition to complement, can also take intersection, such as matching elements 3-7

li:nth-child(n+3):nth-child(-n+7){
    color:red;
}
Copy the code

(? <=p) 

 '123456789'.replace(/ (? < = ^. ({2})? < = ^. {0, 6})/g.The '*') 
 12 * * * * * / / "89"
Copy the code

Union, complement, and union. CSS is very simple:

li:nth-child(3).li:nth-child(7){
    color:red;
}
Copy the code

| 

 '123456789'.replace(/ (? <=^(.{2}|.{6}))./g.The '*')
 12 * 456 * 89 "/ /"
Copy the code

From then on, look at it line by line and see how similar the two really are.

This kind of cross-boundary comparison, I think is very interesting!

In this paper, to the end.

In addition, welcome to continue to read my “JS regular mini book”.