js regular expression lookahead and lookbehind and non-capturing grouping

Combining lookahead and lookbehind with capture groups

In real application scenarios, capturing groups or non-capturing groups are usually limited to lookahead and lookbehind conditions. For example, when formatting the number 12345678, the result is 12,345,678. Its regular implementation is as follows:

let formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')

Capturing and non-capturing groups

In order to understand lookahead and lookbehind, we must first understand capturing groups and non-capturing groups

In js,

() means capturing groups, () will save the matching values ​​in each group, using $n (n is a number, indicating the content of the nth capturing group);

(?:) represents a non-capturing group. The only difference from a capturing group is that the value matched by the non-capturing group is not saved.

Taking the formatSum expression as an example, (?=(?:\d{3})+(?!\d)), (?:\d{3}), (?!\d) are all groups, and the second group is a non-capturing group.

Looking forward, looking back, and looking forward and looking back negatively

In the above formatSum expression, '?=' and '?!' are used, which are the so-called lookahead and negative lookahead. To make it easier to understand, let's start with a simple example.

// Lookahead:
A(?=B) //Find A before B
// Lookback:
(?<=B)A //Find A after B
// Negative lookahead:
A(?!B) //Find A that is not followed by B
// Negative lookback:
(?<!B)A //Find A that is not preceded by B

Looking back at the formatSum expression, (?:\d{3})+(?!\d) is considered as an overall expression A, that is,

formatSum = /\B(?=A)/g //Here A is an expression, not the actual letter A, just for ease of understanding

It means to match the \B in front of expression A, and \B matches non-letter boundaries, so it can be seen that the overall function of the expression is to match and replace the boundary in front of expression A.

The counterpart to \B is \b, which matches a letter boundary. For beginners, the concept of boundary is difficult to understand. You can think of it as an invisible |. There is a boundary in any string with a length greater than or equal to 2. For example, 'ab' can be seen as 'a|b', except that the | is invisible and is not counted in the string length.

'ab'.replace(/\B/, ',')
// a,b

Next let's look at part A of the expression: (?:\d{3})+(?!\d) .

First, ?: represents a non-capturing group, \d{3} represents 3 digits, and (?:\d{3})+ represents 3, 6, 9, 12... digits;

(?!\d) is a negative lookahead, which means to match (?:\d{3})+ that is not followed by a number. In summary:

(?:\d{3})+(?!\d)  

Matches 3*n (n=1 increments) digits in '12345678' that are not numbers, i.e. '678', '345678'

So, the result is:

formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')

Matches the non-letter boundary before the 3*n (n=1, n++) digits in '12345678' that are not numbers.
That is, the non-letter boundaries before '678' and '345678' are finally replaced with commas.
That is, add a comma before '3' and '6'

Right now

'12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',') === '12,345,678'
// true

Summarize

This is the end of this article about the lookahead, lookbehind and non-capturing groups in js regular expressions. For more information about lookahead, lookbehind and non-capturing groups in js regular expressions, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!