In-depth understanding of JS regular expressions---grouping

In-depth understanding of JS regular expressions---Group

I wrote an article about getting started with regular expressions before. I thought I had a relatively good understanding of regular expressions, but today I encountered another pitfall. Maybe Maybe it’s because I’m not careful enough. Today I will focus on sharing with you the grouping in JavaScript regular expressions. If you don’t understand JS regular expressions enough, you can click here to learn more.

Grouping is widely used in regular expressions. The grouping I understand is a pair of brackets (). Each pair of brackets represents a grouping. Grouping can be divided into:

•Capturing grouping
•Non-capturing grouping

Capturing grouping

Capturing grouping will be obtained in the form of the second and third items in a function such as match exec The results of the corresponding grouping. Let’s look at an example first

var reg = /test(\d+)/;
 var str = 'new test001 test002';
 console.log(str.match(reg));//["test001", "001", index: 4, input: "new test001 test002"]

(\d+) in the code is a group (some people also call it a sub-pattern), but it all means the same meaning. The above example Test001 is the exact match result, but the group matching is to find the characters matching the sub-pattern \d+ from the entire exact match result (that is, test001), which is obviously 001. But the situation encountered today is like this

var reg = /test(\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));//["test001", "1", index: 4, input: "new test001 test002"]

The difference is that (\d+) is changed to (\d)+. The entire matching result is still test001, but the matching result of the first group is different. Let's slowly analyze their differences

(\d+) This is a grouping situation, because by default the matching mode is greedy mode, which means to match as many \d+ as possible. The result is 001 and then a pair of brackets is added outside, which is a group, so that the matching result in the first group is 001. Let’s look at (\d)+ in the second example. This is also a greedy mode. First, the Matching 0, followed by 0, will also match until the last 1, and it will also match until the end of the match. It looks no different from the match in the first example, but the grouping (\d) here means matching a single number, as I said before The understanding is 0 but this understanding is wrong. Since the entire matching is a greedy mode, matching as many (\d) in the group as possible will capture the last matched result 1. If it is a non-greedy mode, it will match as few as possible

var reg = /test(\d)+?/;
var str = 'new test001 test002';
console.log(str.match(reg));//["test001", "0", index: 4, input: "new test001 test002"]

In this way, the (\d) matching result is 0. Although there are still matching results later, here are as few matches as possible

Non-capturing grouping

Non-capturing grouping means that a pair of parentheses is needed in some places, but you don’t want it to become a capturing grouping, that is, you don’t want this group to be obtained by functions like macth exec, usually in front of the parentheses. Adding ?: that is (?:pattern) becomes a non-capturing group,

var reg = /test(?:\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));//["test001", index: 4, input: "new test001 test002"]

In this way, the content matched by the group will not appear in the match result That is, 1.

is missing the second item. This article focuses on the difference between (\d+) and (\d)+. It is also the pitfall I stepped into today. If there are any mistakes, please correct me. .

The above article provides an in-depth understanding of JS regular expressions---grouping is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

For more in-depth understanding of JS regular expressions---for grouping-related articles, please pay attention to the PHP Chinese website!