JS regular expression group matching

what is grouping

In layman's terms, the grouping I understand is that the content enclosed in () in the regular expression represents a grouping, like this:

var reg = /(\d{2})/
reg.test('12');  //true

Here (/d{2}) in reg means a group, matching two digits

The form of the grouped content

A group can have a concrete expression like the above, which can express a repeated string elegantly

/hahaha/
/(ha){3}/

These two expressions are equivalent, but with grouping they can be made more concise.

There can also be multiple candidate expressions in the physique grouping, such as

var reg = /I come from (hunan|hubei|zhejiang)/;
reg.test('I come from hunan');   //true
reg.test('I come from hubei');   //true

That is to say, in this grouping, several candidate expressions separated by | are in a parallel relationship, so this | can be understood as the meaning of or

grouping

There are four types of groups

capture()
non-capturing (?:)
Positive look-ahead (?=)
The reverse look-ahead type (?!)
We use more capture-type groups, and only this grouping will temporarily store the matched strings

grouped applications

Grouping is relatively widely used in regularization, and we often use capturing grouping

capture and reference
The strings captured (matched) by the regular expression will be temporarily stored, and the strings captured by the grouping will be numbered from 1, so we can refer to these strings:
var reg = /(\d{4})-(\d{2})-(\d{2})/; var dateStr = '2018-04-18'; reg.test(dateStr); //true RegExp.$1 //2018 RegExp.$2 //04 RegExp.$3 //18
Combine the replace method to do custom string replacement
The captured string can be directly referenced in the parameters of the String.prototype.replace method. For example, we want to replace the common date format in development. For example, the background returns you a 2018/04/18, allowing you to replace it with 2018- 04-18, you can use grouping,
var dateStr = '2018/04/18'; var reg = /(\d{4})\/(\d{2})\/(\d{2})/; dateStr = dateStr.replace(reg, '$1-$2-$3') //"2018-04-18"
but it should be noted here that / needs to be escaped with \
backreference
Quotations can also be used in regular expressions, which are called backreferences:
var reg = /(\w{3}) is \1/ reg.test('kid is kid') // true reg.test('dik is dik') // true reg.test('kid is dik') // false reg.test('dik is kid') // false
It should be noted that if an out-of-bounds or non-existent number is referenced, it will be parsed as a normal expression
var reg = /(\w{3}) is \6/; reg.test( 'kid is kid' ); // false reg.test( 'kid is \6' ); // true
non-capturing grouping
Sometimes non-capturing grouping can be used just for grouping and no capturing is required, for example
var reg = /(?:\d{4})-(\d{2})-(\d{2})/ var date = '2012-12-21' reg.test(date) RegExp.$1 // 12 RegExp.$2 // 21
Forward and reverse look-ahead grouping
Positive look-ahead grouping: you stand in place and look forward, if the front is the specified thing, return true, otherwise false
var reg = /kid is a (?=doubi)/ reg.test('kid is a doubi') // true reg.test('kid is a shabi') // false
Reverse look-ahead grouping: you stand in place and look forward, if the front is not the specified thing, return true, if it is, return false
var reg = /kid is a (?!doubi)/ reg.test('kid is a doubi') // false reg.test('kid is a shabi') // true
Since both look-ahead grouping and non-capturing grouping do not capture, what is the difference between them? First look at the example:
```
var reg, str = "kid is a doubi";
reg = /(kid is a (?:doubi))/
reg.test(str)
RegExp.$1 // kid is a doubi

reg = /(kid is a (?=doubi))/
reg.test(str)
RegExp.$1 // kis is a
```
That is, the strings matched by the non-capturing grouping will still be grouped by the outer layer The look-ahead type does not match, so if you want the outer grouping to not match the value of the inner grouping, you can use the look-ahead grouping.