Analysis of key points of JS regular expressions

This article mainly shares with you the key points of JS regular expressions. Since I was looking at the source code of VueJS before and saw the HtmlParser part, I felt that the basic knowledge of regular expressions I had seen before was completely insufficient. Now I read through the blog information and put some information into it. The difficult-to-use parts of regular expressions in JS are summarized to make it easier for you and your SF friends to read.

Regular grouping

Repeated matching

For repeated matching, we often use Let’s practice the grouping function of regular expressions by using regular matching IP addresses.

Assume that the IP address we want to match is between 0.0.0.0 - 255.255.255.255. We can intuitively understand that we only You need to match three digits + dot three times, and then match three digits once.

The three digits + dot mentioned here is a rule we are talking about, we can use it in the expression Convert them into rules: \d{1,3}\.. When we wrap the rules in brackets, they become groups: (\d{1,3}\ .), so the regular expression matching IP addresses can be written as: (\d{1,3}\.){3}\d{1,3}

Another way of thinking, we can also match like this: \d{1,3}(\.\d{1,3}){3}

Extension: If you are smart, you may have already It occurred to me that there is an omission in the matching of \d{1,3}. In the actual production process, \d{1,3} may match 999 kind of number, it is a wrong IP address segment. The real IP address regular matching is posted here for your reference: ((25[0-5]|2[0-4]\d|((1\ d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2}) |([1-9]?\d))) , the pleasant thing is that the grouping strategy it uses remains the same.

Backreference (reverse reference)

We consider a very special situation. When we want to match the same four IP segments, such as 100.100.100.100, the strategy of repeated matching groups fails: repeated matching of groups does not guarantee matching the same number-> ; At this time we need to use the power of the Backward Reference strategy (Young man, do you long for power? 2333, poke my avatar and take you to explore the literary and artistic path where music and code are intertwined.)

Backreferences have different syntaxes when writing regular expressions in different languages. We discuss the most common one in JS, which is a backreference in the form: \number, where number represents the serial number of the group.

Give you a simple chestnut, you can remember it instantly. If we want to match repeated three-digit numbers, we mark the rule of matching a number as a group: (\d), repeat matching the specific content of this group (the first group) three times: (\d)\1, thus achieving the goal.

We can easily distinguish repeated matching and backward reference: the former is to repeatedly match the same rule, and the latter is to match the specific content of the group.

Default Some rules need to be understood and remembered:

• \0 represents the matching content of the entire regular expression

Regular Assertion

I still remember that I read an article called , which mentioned regular assertion.
I felt at the time It’s really easy to understand at a glance. But unfortunately, in actual production, there are too few cases of using various complex regular expressions. If I didn’t browse Baidu today, I’m afraid I wouldn’t be able to remember the classification of assertions and various usage methods.

The literal meaning of assertion is to conclude that the (program) running until this point (result) is such a "scenario". It describes a scenario, in other words, it is A "certain scenario". But what we need to remember is that our "result" is not included in the "scenario".

VueJS needs to match HTML tags, so we match: '< 'Not Fault' in ;segment>Not Fault' is an example.

If we use ordinary regular expressions, such as /<segment>.*</segment>&gt ;/ will match the entire string 'Not Fault'. We use assertions and think in terms of "scenarios": '' and '' It is a "certain scenario". The result we need to match is: 'Not Fault'. No matter how the characters inside the tag change, the tag head and tag tail remain unchanged.

At one go, we Continue below

Precede assertion

Precede assertion, this is how I understand it: match the content first, and then make "scenario" assumptions.

Place it in our previous chestnut , it matches like this, and keeps matching content until it encounters the '' scenario. The syntax is as follows: (?=)

Post assertion

Later assertion, my understanding is: match the scene first, and then match the content.

Place it in our previous chestnut, first match the '' scene, and then continue to The following matching content, the syntax is as follows: (?)

Practice

Regular expressions match string content. So I bound the understanding of "first" and "last" to the order of content matching to facilitate understanding.

We combine the preceding assertion and the latter assertion. The entire expression is as follows: (?).*(?=), we can Obtained the desired result: 'Not Fault'.

"Positive and negative" assertion

In fact, what we just did was a positive scenario, and in actual situations there is also "this scenario is not satisfied" Usage scenarios.

For example, the expression we just used: (?).*(?=) is definitely ' ' '' scenario actually uses "positive post-assertion" and "positive first assertion" to match content. "Positive" represents a positive state.

The negative assertion is an assertion that does not satisfy the scenario... The syntax is to replace the equal sign in the positive assertion with an exclamation mark:

• Negative look-ahead assertion(?!)

• Negative post assertion(?

For example: ['1999', '2099','2199'...'9099'] If we want to match all years ending with '99' except '1999', we can use the expression: (?

Related recommendations:

Commonly used basic syntax of JavaScript regular expressions

Brother Zhu talks about PHP regular expressions Where are expressions and regular expressions used?

JS password strength verification function example based on regular expression_javascript skills

The above is the detailed content of Analysis of key points of JS regular expressions. For more information, please follow other related articles on the PHP Chinese website!