To distinguish? : and? = and? ! All three, let’s talk about what each of them does.

1.? = for prospective matching, exp1(? =exp2) find exp1 before exp2. Here’s an example:

// A random string is typed
let str = '123sertersdTYgfgbh45t6343Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845er';
// Find the 3-5 digits before the uppercase letter and replace them with -$-
let res = str.replace(/ \ d {3, 5} (? =[a-zA-Z])/g.'- $-);
console.log(str);
console.log(res);
Copy the code

The printed value is:

123sertersdTYgfgbh45t6343Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845er
-$-sertersdTYgfgbh45t-$-Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy-$-er
Copy the code

2.? ! Is negative prospective matching, exp1(? ! Exp2) find exp1 not followed by exp2. Here’s an example:

let str = '123sertersdTYgfgbh45t6343Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845er';
// Find 3-5 digits that are not followed by a letter and replace them with -$-
let res_ = str.replace(/ \ d {3, 5} (? ! [a-zA-Z])/g.'- $-);
console.log(str);
console.log(res_);
Copy the code

The printed value is:

123sertersdTYgfgbh45t6343Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845er
123sertersdTYgfgbh45t-$-3Dfdgbgdfher-$-#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy-$-5er
Copy the code

3.? <= for backward-matching, (? <=exp1)exp2 Here’s another example:

let str = '123sertersdTYgfgbh45t6343Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845er';
// Find consecutive letters following 3-5 digits and replace them with -$-
let res_b = str.replace(/ (? < = \ d {3, 5}) [a zA - Z] + / g.'- $-);
console.log(str);
console.log(res_b);
Copy the code

The printed value is:

123sertersdTYgfgbh45t6343Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845er
123-$-45t6343-$-345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845-$-
Copy the code

4.? <! Is negative afterthought matching, (? <! Exp1 = exp2; exp2 = exp2; Here’s another example:

let str = '123sertersdTYgfgbh45t6343Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845er';
// Find consecutive letters that are not preceded by 3-5 digits and replace them with -$-
let res_nb = str.replace(/ (? 
      .'- $-);
console.log(str);
console.log(res_nb);
Copy the code

The printed value is:

123sertersdTYgfgbh45t6343Dfdgbgdfher345#$%FTGH4t34dfg34t56G8rtuy56fgbT6dfy58845er
123s-$-45-$-6343D-$-345# $% $-4- $-34- $-34- $-56- $-8- $-56- $-6-$-58845e-$-
Copy the code

5. ?:

The last is? :, it groups for non-capture (? Capture group () saves the matching value of each group, using $n(n is a number representing the contents of the NTH capture group). The only difference between a non-capture group and a capture group is that values matched by a non-capture group are not saved.

Examples of non-capture grouping and capture grouping are as follows:

// In this case, we will swap the contents of the first capture group and the second capture group, "Doe, John" to "John Doe"
let n = "Doe , John";
let nn = n.replace(/(\w+)\s*,\s*(\w+)/."$2 $1");
console.log(nn); // John Doe

// Change to non-capture grouping
// There is only one capture group, (? :\w+) matches only and does not store the value. $2 does not actually exist and is treated as a string $2
let nbn = n.replace(/(\w+)\s*,\s*(? :\w+)/."$2 $1");
console.log(nbn); // $2 Doe
Copy the code

Finally, a thousand separator example

let q = "1234567890".replace(/\B(? = (? :\d{3})+(? ! \d))/g.",");
console.log(q); / / 1234567890
Copy the code

Look ahead matching (? =), non-capture grouping (? 🙂 and negative prospective matching (? !). Yes, but let’s look at how these three apply to the thousand separator example.

See first / \ B (? =)/g this part, it is prospective matching, global query matching? = after the condition \B(match not at the beginning or end of the word), then replace with,. Take a look at? = the following part (? :\d{3})+(? ! \ d). (? :\d{3}) is a non-capture group that matches three digits, followed by + to indicate that the preceding non-capture group can match 3N digits; (? ! \d) is negative prospective matching, combination front (? :\d{3})+ is a non-capture group matching 3n digits that are not followed by digits.

This regular expression is a query that matches 3N numbers plus a non-numeric non-word boundary.

1 2 3 4 5 6 7 8 9 0
1.2 3 4|5 6 7|8 9 0(This is a word boundary, not a number, and preceded by3nThe match is successful1.2.3 4 5|6 7 8|9 0(does not meet the3nIf the match fails, try the next case1.2 3.4 5 6|7 8 9|0(does not meet the3nIf the match fails, try the next case1.2 3 4.5 6 7|8 9 0(This is a word boundary, not a number, and preceded by3nThe match is successful1.2 3 4.5.6 7 8|9 0(does not meet the3nIf the match fails, try the next case1.2 3 4.5 6.7 8 9|0(does not meet the3nIf the match fails, try the next case1.2 3 4.5 6 7.8 9 0(This is a word boundary, not a number, and preceded by3nThe match is successful1.2 3 4.5 6 7.8.9 0(does not meet the3nIf the match fails, try the next case1.2 3 4.5 6 7.8 9.0(does not meet the3nIf the match fails, try the next case1.2 3 4.5 6 7.8 9 0,(does not meet the matching conditions of non-word boundary), the matching fails, and the final result of the attempt is:1.2 3 4.5 6 7.8 9 0
Copy the code