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.
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 match999
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.
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
I still remember that I read an article called
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> ;/
will match the entire string '
At one go, we Continue below
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: (?=</segment>)
Later assertion, my understanding is: match the scene first, and then match the content.
Place it in our previous chestnut, first match the '(?<=<segment>)
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: (?<=<segment>).*(?=</segment>)
, we can Obtained the desired result: 'Not Fault'.
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: (?<=<segment>).*(?=</segment>)
is definitely '
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: (?<!19 )99
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!