A Regular Expression is a text pattern that includes ordinary character metacharacters and is used for string operations, such as lookup and matching. Learning re, first of all, you need to know its most basic syntax, characters, usage and so on, which is equivalent to the brick of re.

The first step is to learn the basics of regularity

Read the basic beginner’s tutorial first:

Regular expressions – Tutorial

Take a look at this article to consolidate the summary:

Regular character summary and common rules

Here’s a quick summary:

I. Basic Grammar:

/... / package? Preceding character0or1Times (if there is a + back with a? Non-greedy match, matches least item) + preceding character >=1The character before the second * >=0Time ^ match string string starting at $end position (grouping and replace) can also be combined with () do () to match a subexpression | or, to choose between the two. Match any single character {n} other than the newline character \n match n times {n,} match at least n times {n,m} match n to m times \b match a word boundary \b match a non-word boundary can be accessed using \n, where n is a one - or two-digit decimal number that identifies a particular buffer.Copy the code

Second,Expression form:

// constructor
var reg = new RegExp('along'.'img')
console.log(reg)		-->  /along/gim

// the literal way
var reg = /a/ 
console.log(reg)		-->  /along/gim

// Factory mode
var reg = RegExp('along'.'img')
console.log(reg)		-->  /along/gim
Copy the code

Three, basic common methods

  • Regexp.prototype. test Tests whether the prototype contains
// Check whether a character contains a certain content.
var str = 'hello world';
var reg = /hello/g;
reg.test(str);  ---> trueThe return value:trueorfalse
Copy the code
  • String.prototype.match Match filter
// Filters the specified character
var str = 'hellowo12345rdle';
var reg = /[0-9]/img; str.match(reg); -- - > ['1'.'2'.'3'.'4'.'5'];
Copy the code
  • String. The prototype. The split up
var str = '2019-05-12';
var reg = /-/g;
console.log(str.split(reg)) .   --->["2019"."5"."12"]
Copy the code
  • String. The prototype. Replace the replace
var str = 'aadfsfsdf21AAAA324aaa';
var reg = /a/img;
console.log(str.replace(reg, 'ah'). --> hahaha dfsfsdf21 hahaha324Ha, ha, haCopy the code

Step 2: Daily practice consolidation

After learning the basic syntax of regular expressions, we may not be able to understand them immediately, but we can at least understand what they mean when they write a regular expression. It takes a lot of reading practice to become proficient at using regees in everyday code!

In daily business, we may have more access to the Internet to find a regular matching rules, apply directly to the code, such as an id card, phone number check, but if you don’t know what the regular rules, one is unable to distinguish what is the purpose of this rule matching real, may be the rules of error checking, may not achieve your check; Second, there is no way to modify it. For example, if the verification of mobile phone numbers starts with 13, 17, and 18 before, but now there are 19,16, and so on, the matching rules you find may not be applicable.

The following is baidu search for the most common rules check url, you can see that the number of years are not very new, but some fixed matching rules or it is necessary to learn to consolidate, you can read the specific information corresponding to these rules?

Most commonly used regular expressions ever

Regular expression – includes digit character special verification

Common regular expressions

For example, check the id card number

// Id check, can search a lot of rules, let's see their specific matching meaning
1./^\d{/^\d{15}|\d{18} $///15 digits, 18 digits pure digits
2.neglect15/^((\d{18}) | ([0-9x]{18}) | ([0-9X]{18$/}))// 18-digit ID card number (ending with digit and letter X)
3.Normal version, normal verification, no additional rules /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ // The ID card number contains 15 or 18 digits. If the 15 digits are digits, the first 17 digits are digits, and the last digit is the parity bit. The number or character X is case-sensitive
4.According to id address code, year month code, order code rule ^[1-9]\d{5} (18|19| ([23]\d))\d{2} ((0[1-9]) | (10|11|12)) (((0-2] [1-9]) |10|20|30|31)\d{3} [0-9Xx]$  / / 18^ [1-9]\d{5}\d{2} ((0[1-9]) | (10|11|12)) (((0-2] [1-9]) |10|20|30|31)\d{2} [0-9Xx]$ / / 15(^ [1-9]\d{5} (18|19| ([23]\d))\d{2} ((0[1-9]) | (10|11|12)) (((0-2] [1-9]) |10|20|30|31)\d{3} [0-9Xx])|([1-9]\d5\d2((0[1-9]) | (10|11|12)) (((0-2] [1-9]) |10|20|30|31)\d2[09 - xx])/ / summaryDescription: Region: [1-9]\d{5} the first two of the year :(18|19| ([23]\d)) 1800-3999The last two of the year: \d{2} month :(0[1-9]) | (10|11|12)) days :(([0-2] [1-9]) |10|20|30|31Leap years cannot be banned29+
5, with the algorithm... Mind can not remember, ignore, use the time to search it...Copy the code

As mentioned above, the id card code generation and its specific rules, can write more complex regular expressions, here will not repeat the interesting self-retrieval related articles, such as id card regular expression

Step 3 regex reinforcement :() andAt $1, $2The use of the

Js regular expressions () and $1… $9 understanding and use _ Anger doesn’t help -CSDN blog

To understand:

() is a grouping function. Put the matched values into the set of Mathches, which is equivalent to the set name, 1−9 is equivalent to the index, (equivalent to the set name, 1−9 is equivalent to the index, (equivalent to the set name, 1−9 is equivalent to the index, ($1$9) is equivalent to the value of the corresponding index. You can use () and ($1$9) to limit the number of input digits

Application: Understand from case studies

For example, enter a positive integer ranging from 1 to 9999

<input id="digit" type="text"&western nkeyup ="clearInput(this)" onafterpaste="clearInput(this)">

// The value can be a positive integer ranging from 1 to 9999
function clearInput(obj){
    obj.value = obj.value.replace(/[^\d]/g.""); // For input ^/d that is not a number, replace it with ''
    obj.value = obj.value.replace(/^0.*$/g.""); // For 0. With or without a value, replace with ''.
    obj.value = obj.value.replace(/^([1-9])(\d{3}).*$/.'$1 $2'); // Only two decimals can be entered
} // For four-digit numbers, followed by a decimal point. $1$2, that is, only four digits without the decimal point
Copy the code

Example: Enter only digits and reserve two decimal places

<script language="JavaScript" type="text/javascript"> 
function clearNoNum(obj){ 
    obj.value = obj.value.replace(/[^\d.]/g."");  // Clear non-" numbers "and". Characters other than
    obj.value = obj.value.replace(/\.{2,}/g."."); // Keep only the first decimal. Clear successive redundant. Such as 2.. 3.. 4 This leaves only 2.3.4
    obj.value = obj.value.replace("."."$# $").replace(/\./g."").replace("$# $"."."); 
// The first replace will only replace the first one. Then delete the others, and then rotate the first one back, to replace 2.34454 with 2.3.4
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/.'$1 $2. $3');// Only two decimals can be entered, which can be negative
$123 = $123; $123 = $123; $123 = $123;
// There are three parentheses.
    if(obj.value.indexOf(".") <0&& obj.value ! ="") {// If there is no decimal point, the first digit cannot be the amount similar to 01 or 02
        obj.value= parseFloat(obj.value); } } </script> <! DOCTYPE html><html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <input type="text" onkeyup="clearNoNum(this)">
    </body>
</html>
Copy the code

Step 4 Deep regex (greed not greed, capture not capture)

This part of the content is very deep, I just have some superficial understanding and application, wrong place please correct.

Greedy mode, non-greedy mode

Greedy mode, non-greedy mode (simple memory: quantifier {m.n},? ,*,+?

See article: Greedy and non-greedy patterns of regular expressions in detail (overview)

Simple understanding:

Does not add? To match quantifiers in regular expressions? Is greedy matching, in order to make the whole expression match successfully, will match as much content as possible, plus? Is a non-greedy match and ends when the match is complete.

Subexpression decorated with matched priority quantifiers, using greedy mode; A subexpression decorated with a ignored priority quantifier uses the non-greedy mode.

Matching priority quantifiers include {m,n}, {m,}, and? , *, and +.

Ignore priority quantifiers include: “{m,n}?” , “{m}?” , “??” , “*?” And “+?” .

Example: source string: aa<div>test1</div>bb<div>test2</<div>test1< div> </div>/div>bb<div>test2</<div>.*? <div>test1< /div>
      
test2</
Div >)Copy the code

Capture match non-capture match

See article: Python Regular expression Tutorial II: Capturing the _PYTHon_ Script House

Capture match Non-capture match (Simple memory: Do parenthesis groups add? 🙂

(…). Normal grouping, capture

(? :…). Grouping, but not capturing, which is what we’re going to skip when we use $123 sort to get the grouping

Uncaptured matches are only used for judgment purposes, but are not captured and stored as matches

(1) Positive prediction? : non-capture, equivalent to (x)? But x is not recorded in the capture

(2) forward looking z(? =x) means z must be followed by x, but x is not recorded in the capture

(3) negative outlook z(? ! X) means that z must not be followed by x, but x is not recorded in the capture

(4) forward and backward, negative and backward… Js does not support

Here’s an example:

Positive prediction:var a='3.456'
a.replace(/(\d+)(\.) (\d\d)(\d)/.'$1 $2 $3')
// "3.45" is reserved for 2 decimal places
a.replace(/ (? :\d+)(? : \.) (\d\d)(\d)/.'$1 $2')
// '456'Positive predictivevar str = 'Hello, Hi, I am Hilary.';
2     var reg = /H(? =i)/g;
3     var newStr = str.replace(reg, "T");
console.log(newStr);//Hello, Ti, I am TilaryNegative predictivevar str = 'Hello, Hi, I am Hilary.';
var reg = /H(? ! i)/g;
var newStr = str.replace(reg, "T");
console.log(newStr);//Tello, Hi, I am Hilary
Copy the code

Learning is long, but the road is long