“This is the third day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.
Dear, hello, everyone. I am “Front-end Xiaoxin”. 😇 has been engaged in front-end development and Android development for a long time
Preface:
We learned the basics about regular expressions, but do you understand regular expressions already used in projects? Do not read the words are not at ease again? It becomes important to break down complex strings of regulars into a form that is easy to understand.
Structure and operators:
In regular expressions, operators are represented in structures, which consist of special characters and ordinary characters.
Structure:
The structure of a regular expression includes: character literals, character groups, quantifiers, anchors, grouping, selection branches, and backreferences.
Operator:
| The name of the | The operator | priority |
|---|---|---|
| escape | \ | 1 |
| Brackets and square brackets | (…). . (? :…). . (? =)… . (? ! …). […]. | 2 |
| Quantifier qualifier | {m}, {m,n}, {m,},? , *, + | 3 |
| Position and sequence | ^, $, \ metacharacter, general character | 4 |
| Pipe, |
Scenario analysis:
Overall matching:
​
The target characters are **abcd**, **bcde**
First write regular / ^ so I guess the abcd | bcde $/ gm, through the pipe to split into two sub models, but after seen below you will find that your compliance of characters matching success, but the variant strings are matching:
For the above picture problem, we need to look at the visualization, match the character beginning with ABCD and match the character ending with BCDE?
Since positional characters have a higher priority than pipe characters, we need to group them with parentheses of higher priority. The adjusted regular expression is shown below:
Take a look at the final result again in the debug tool:
Quantifier conjunctions:
The target string must be one of each character a, B, or C, and the string must be consecutive lengths of 3 or multiples of 3.
What would your re be this time? Would it look like this?
It’s obvious that this is a bad time to see this plus sign, but how do we represent this extra 3? Again we use parentheses (parentheses) :
Metacharacter escape:
Metacharacters (special characters) in a re include: ^, $,., *, +,? , \ |, /, (,), [and], {and}, =,! , :, -. When matching characters, you need to escape them. The escape character is “\”, which can be used as required.
How to match strings[abc]?
In a regular expression, [ABC] is a string representing one of a, b, or C. How do we match the string [ABC]? Of course, it is also escaped: after the opening parenthesis is escaped, the single closing parenthesis does not form a character group, so there is no ambiguity and no need to escape.
How do I match the string {3,5}?
Similarly, it needs to be escaped, as shown below:
Case Study:
Simple id regular expression:
Regular expressions:/^(\d{15}|\d{17}[\dxX])$/gm
We know from our visual analysis that since the pipe character has the lowest priority, the regular expression is divided into two branches, the first branch consisting of 15 digits and the first branch consisting of 17 digits + a digit or an uppercase or lowercase X.
IPV4 regular expressions:
Regular expressions: / ^ ((0 {0, 2} \ | 0 d? \d{2}|1\d{2}|2[0-4]\d|25[0-5])\.) {3} (0 {0, 2} \ | 0 d? \d{2}|1\d{2}|2[0-4]\d|25[0-5])$/
It seems that the visualization above is also very complicated, isn’t it? Let’s use another tool to see the analysis result:
Step 1 Split:
- The overall structure is divided into two parts matching the first expression 3 times;
- Match the second expression once;
- Now the visualization is starting to make sense
digital+pointGroup1 consists of digits, and Group2 and Group3 consist of digits only.
Part ii Split:
- The content of the preceding and following expressions is the same. The last expression does not need a comparison point, so just analyze one expression.
- First branch: 0 to 2
0+ 1digital, matches two digits and is preceded by 0; - Second branch:
0+ 2digital, matches 2 digits and is preceded by 0; - The third branch:
1+ 2digitalMatches 100 to 199. - Fourth branch:
2+0 ~ 4One of them plus onedigital, matching 200 ~ 249; - Fifth branch:
25+0 ~ 5The value ranges from 250 to 255.
​
Conclusion:
Learning is like rowing upstream, learning to make a mickle makes a mickle, learning to persevere. What you learned tonight 😴, see you next
Welcome to follow my public account “Front-end Xiaoxin students”, the first time to push original technical articles.