How to easily remember JS Regular Expressions and JS Regular Expressions

How to easily remember JS Regular Expressions and JS Regular Expressions

Preface

A regular expression (regular expression) describes a string matching pattern, it can be used to check whether a string contains a seed string, replace matched substrings, or retrieve substrings that meet certain conditions from a string. A regular expression is a text format consisting of common characters (such as characters a to z) and special characters (called metacharacters. Mode description one or more strings to be matched when searching text. A regular expression is used as a template to match a character pattern with the searched string.

Why is there a regular expression? In fact, it is because of the Computer stupid (this is not what I said), such as 123456@qq.com we look at is the mailbox, but the computer does not know, so we need to use some computer language, to develop the rules, tell it to comply with this rule is a mailbox, so that the computer can help us find the corresponding thing. Therefore, regular expressions are used to set rules to perform the operations we need, such as logon verification and searching for specified items. If you say too much, it is unnecessary. Let's look at the subject directly.

Define Regular Expressions:

Copy codeThe Code is as follows:
Var re = new RegExp ("a"); // RegExp object. Parameters are the rules we want to develop. This method must be used in one case.
Var re =/a/; // It is recommended to use a simplified method with better performance. Do not leave it blank or think it is a comment,

Common Regular Expressions

1 test (): Find the regular content in the string. If true is returned, false is returned.

Usage: Regular. test (string)

Example: Determine if it is a number

Var str = '100'; var re =/\ D/; // \ D indicates non-numeric if (re. test (str) {// returns true, which indicates that a non-number is found in the string. Alert ('all digits ');} else {alert ('all digits ');}

Regular expressions have many symbols that indicate different meanings. They are used to define different rules, such as the above \ D and the following:

\ S: Space

\ S: non-space

\ D: Number

\ D: Non-numeric

\ W: character (letter, number, underline _)

\ W: Non-character example: whether there are non-numeric characters

(The following describes some frequently-used Characters Based on the examples, and then summarizes them .)

2 search (): search for the regular content in the string, and return the position where it appears (starting from 0, if the match is not just a letter, returns the position of the first letter. If the search fails, the value-1 is returned.

Usage: String. search (regular)

Search for the compound regular content in the string. Case-insensitive: I -- ignore (in regular expressions, It is case-sensitive by default. If it is case-insensitive, add the id I at the end of the regular expression)

Example: Find the letter B in the string, which is case-insensitive

Var str = 'abcdef'; var re =/B/I; // var re = new RegExp ('B', 'I'); you can also write alert (str. search (re); // 1

3. match () searches for the content of the compound rule in the string. if the search is successful, the returned content is in the array format. If the search fails, null is returned.

Usage: String. match (regular)

Quantifiers: + at least one uncertain match (matching means searching)

Global match: g -- global (default in the regular expression, the search will end if the content of the compound rule is found)

Example: Find All numbers in the specified format. For example, find 123,54, 33,879.

Copy codeThe Code is as follows:
Var str = 'haj123sdk54hask33dkhalsd879 ';
Var re =/\ d +/g; // match at least one number at a time. If the global match is not a global match, it stops when the number 123 is found. Only 123 is displayed. With global matching, the system searches for matching rules from the beginning to the end. If there is no plus sign, the matching result is 1, 2, 3, 5, 4, 3, 3, 8, 7, 9, which is not what we want. With the plus sign, each matching number is at least one.
Alert (str. match (re); // [33,879,]

4 replace (): Find a regular string and replace it with the corresponding string. Return the replaced content.

Usage: String. replace (Regular Expression, New String/callback function) (in the callback function, the first parameter indicates the characters that match successfully each time)

|: Or.

Example: sensitive word filtering, for example, I Love Tiananmen, Beijing, and the sun rises on Tiananmen. ------ I love * and. That is, Beijing and Tiananmen are changed to,

In the beginning, we may think of the following method:

Var str = "I Love Tiananmen, Beijing. The sun rises on Tiananmen. "; Var re =/Beijing | Tiananmen Square/g; // find the global match var str2 = str in Beijing or Tiananmen Square. replace (re, '*'); alert (str2) // I love **, * Rising Sun // This only turns what is found into *, it cannot contain a few words *.

To implement several words corresponding to several characters *, we can use the callback function:

Copy codeThe Code is as follows:
Var str = "I Love Tiananmen, Beijing. The sun rises on Tiananmen. ";
Var re =/Beijing | Tiananmen Square/g; // globally match Beijing or Tiananmen Square
Var str2 = str. replace (re, function (str ){
Alert (str); // used for testing: the first parameter of the function represents the regular character that is found each time, so the first str refers to the second str in Beijing and the third str in Tiananmen.
Var result = '';
For (var I = 0; I <str. length; I ++ ){
Result + = '*';
}
Return result; // so a few words are returned *
});
Alert (str2) // I love *****, and the sun rises
// The entire process is to find Beijing, replace it with two characters *, replace Tiananmen with three characters *, and replace Tiananmen with three characters *.

Replace is a very useful method and is often used.

Characters in the Regular Expression

(): Parentheses, called group characters. It is equivalent to brackets in mathematics. As follows:

Copy codeThe Code is as follows:
Var str = '2017-6-7 ';
Var re1 = // d-+/g; // global matching number, horizontal bar, number of horizontal bars at least 1, matching result: 3-6-
Var re1 =/(\ d-) +/g; // The number of global matching numbers, horizontal bars, numbers, and horizontal bars must be at least 1-6-
Var re2 =/(\ d +) (-)/g; // at least one number is matched for a global match. The result is 2013-6-

At the same time, every item with parentheses in the regular expression is called the subitem of the regular expression. Subitem is very useful in some cases, for example, let's look at a chestnut.

Example: Change 2013-6-7 to 2013.6.7

Copy codeThe Code is as follows:
Var str = '2017-6-7 ';
Var re =/(\ d +) (-)/g;
Str = str. replace (re, function ($0, $1, $2 ){

// If there is a subitem in replace,
// The first parameter: $0 (the overall result after successful matching is 2013-6 -),
// Second parameter: $1 (the first group that matches successfully, which indicates \ d 2013, 6)
// The third parameter: $1 (the second group that matches successfully, which indicates ---)
Return $1 + '.'; // return 2013. 6 respectively.

});
Alert (str); // 2013.6.7
// The entire process is to replace item 2013-6-2013. 6. Finally, 2013.6.7 is displayed.

The match method also returns its own subitem, as shown below:

Copy codeThe Code is as follows:
Var str = 'abc ';
Var re =/(a) (B) (c )/;
Alert (str. match (re); // [abc, a, B, c)

Supplement: the exec () method is the same as the match method. It searches for the content that complies with the rule and returns the content in an array format.

Usage: Zheng ze.exe c (string );

Attribute: input (representing the string to be matched)

Chestnut: Not a global match:

Copy codeThe Code is as follows:
Var testStr = "now test001 test002 ";
Var re =/test (\ d +)/; // match only once
Var r = "";
Var r = re.exe c (testStr)
Alert (r); // test001 001 returns the matching result and subitem
Alert (r. length); // 2 returns the length of the content
Alert (r. input); // now test001 test002 indicates the string that is successfully matched each time.
Alert (r [0]); // test001
Alert (r [1]); // 001 indicates the first sub-item (\ d +) in the string that matches successfully each time)
Alert (r. index); // 4 position of the first character in the string that is matched successfully each time

Global match: for global match, you can use the while loop to find the matched string and Its subitem. Each match starts matching the last position.

Copy codeThe Code is as follows:
Var testStr = "now test001 test002 ";
Var re =/test (\ d +)/g;
Var r = "";

// Match the last position after two matches. If the last matching r is false, the matching test001 test002 is stopped.
While (r = re.exe c (testStr )){
Alert (r); // returns the matched string and Its subitem. test001 001 and test002 are displayed respectively.
Alert (r. input); // pop-up: now test001 test002 now test001 test002
Alert (r [0]); // indicates the string that is successfully matched. test001 test002 is displayed.
Alert (r [1]); // indicates the first sub-item (\ d +) in the string that matches successfully each time.
Alert (r. index); // The Position of the first character in the string that matches successfully each time.
Alert (r. length); // displayed respectively: 2 2
}

[]: Indicates any one of a set. For example, [abc] indicates that a character matches any one of a B c, or a range, [0-9] The range must be small to large.

[^ A] indicates a single character. ^ if it is written in [], it indicates exclusion.

Example: matching HTML tags, such as <div class = "B"> hahahah </div>, to find the tag <div class = "B"> </div>

Copy codeThe Code is as follows:
Var re =/<[^>] +>/g; // match at least one content in the left brace that is not in the right brace (because there are attributes and other things in the tag ), then match the right parenthesis
Var re =/<[\ w \ W] +>/g; // match the content of at least one or more characters in the left brace, and then match the right Brace
// In fact, it is to find the left parenthesis, and there can be at least one content in the middle, until the right parenthesis is found, it indicates a label.

Escape characters

\ S: Space

\ S: non-space

\ D: Number

\ D: Non-numeric

\ W: character (letter, number, underline _)

\ W: Non-Character

. (Point) -- any character

\.: Real point

\ B: independent part (START, end, space)

\ B: non-independent part

Let's look at the last two chestnuts:

Var str = 'onetwo '; var str2 = "one two"; var re =/one \ B/; // e must be followed by an independent start or space, or end alert (re. test (str); // falsealert (re. test (str2); // true

Example: Write a function that uses the class name to get the node:

We may have seen such a function before:

Function getByClass (parent, classname) {if (parent. getElementsByClassName) {return parent. getElementsByClassName (classname);} else {var results = new Array (); // The var elems = parent. getElementsByTagName ("*"); for (var I = 0; I <elems. length; I ++) {if (elems [I]. className = classname) {results. push (elems [I]) ;}} return results ;}}

This is actually a problem. For example, if a tag contains two classes or a class with the same name, for example, <div class = "box1 box1">, <div class = "box1 box2> it cannot be obtained. We can use regular expressions to solve this problem.

Copy codeThe Code is as follows:
Function getByClass (parent, classname ){
If (parent. getElementsByClassName ){
Return parent. getElementsByClassName (classname );
} Else {
Var arr = [];
Var aEle = parent. getElementsByTagName ('*');

// Var re =/\ bclassname \ B/; // cannot be written in this way. When a regular expression requires a parameter, it must be written in the full name, in short, classname is used as a string for matching.
Var re = new RegExp ('\ B' + classname + '\ B'); // when matching, classname must start with a space or followed by a space. By default, a successful match is stopped, so even if there are duplicates, it will not be matched again.
// It should be noted that when the full name is used to declare a regular expression, the parameters are of the string type. Therefore, we need to ensure that these special characters can be output in the string. \ Bitself is a special character and cannot be output in the string. Therefore, you must add a backslash to escape the character.
For (var I = 0; I <aEle. length; I ++ ){
If (re. test (aEle [I]. className )){
Arr. push (aEle [I]);
}
}
Return arr;
}
}

\ A indicates a repeated subitem, for example:

\ 1 the first sub-item that repeats

\ 2 duplicate second sub-item

/(A) (B) (c) \ 1/----- match abca/(a) (B) (c) \ 2/------ match abcb

Example (frequently asked in Interview Questions): Find the maximum number of characters for repeated items

Split (): The method in the string to convert the string into an array.

Sort (): sorting method in the array, sorted by the ACALL code.

Join (): The method in the array to convert the array to a string.

Copy codeThe Code is as follows:
Var str = 'assssjdssskssalsssdkjsssds ';
Var arr = str. split (''); // converts a string to an array.
Str = arr. sort (). join (''); // sort the string first. In this way, the same characters are put together and then converted to a string.
// Alert (str); // aaddjjkklsssssssssssssssssss
Var value = '';
Var index = 0;
Var re =/(\ w) \ 1 +/g; // match the character and repeat it at least once.
Str. replace (re, function ($0, $1 ){
// Alert ($0); indicates the result of each successful match: aa dd jj kk l sssssssssssssssss
// Alert ($1); indicates the first sub-item that is successfully matched, that is, \ w: a d j k l S.
　　
If (index <$0. length) {// if the value saved by index is less than $0, perform the following operations
Index = $0. length; // This way the index is always saved in the maximum length.
Value = $1; // value stores the most frequently-seen characters.
}
});
Alert ('maximum character: '+ value +', repeated times: '+ index); // s 17

Quantifiers: the number of occurrences.

{N, m}: appears at least n times, at most m times

{N ,}: at least n times

*: Any time is equivalent to {0 ,}

? : Zero or one time is equivalent to {0, 1}

+: One or any time is equivalent to {1 ,}

{N}: Exactly n times

Example: Determine if it is a QQ number

// ^: Place it at the beginning of the regular expression, which indicates the start point. Note that/[^ a]/and/^ [a]/are different. The former indicates exclusion, the latter represents the first place.
// $: The last position of the regular expression, which indicates the end.

// First, consider the rules for the QQ number. 1. The first digit cannot be 0. 2. It must be a 5-12 digit number. var aInput = document. getElementsByTagName ('input'); var re =/^ [1-9] \ d {4, 11} $/; // 123456abc to prevent such a situation, therefore, the last // first digit must be 0-9, followed by 4-11 digits. AInput [1]. onclick = function () {if (re. test (aInput [0]. value) {alert ('qq No. ');} else {alert (' not QQ No ');}};

Example: Remove leading and trailing spaces (frequently used in interview questions)

Copy codeThe Code is as follows:
Var str = 'hello ';
Alert ('+ trim (str) +'); // brackets to see the difference. (Hello)
Function trim (str ){
Var re =/^ \ s + | \ s + $/g; // | or \ s indicates space + at least one leading space or at least one trailing space and global match
Return str. replace (re, ''); // replace spaces with null
}

Common Form Verification

Copy codeThe Code is as follows:
Match Chinese characters: [\ u4e00-\ u9fa5] // range of Chinese ACALL Codes
Space at the end of the first line of the line: ^ \ s * | \ s * $ // any space at the beginning or at the end of the line (it can be expressed as no space)
Email: ^ \ w + @ [a-z0-9] + (\. [a-z] +) {} $
// Start with at least one character (\ w letters, numbers or underscores), then match @, then any letter or number ,\. represents the real point ,. followed by at least one character (a-z. com. Because some mailboxes are like .cn.net. (Xxxx.@qq.com xxxx.@163.com)
URL: [a-zA-z] +: // [^ \ s] * http ://......
// Match any case-insensitive letters followed by //, followed by any non-space characters
Zip code: [1-9] \ d {5} // The Starting number cannot be 0, followed by 5 digits
ID card: [1-9] \ d {14} | [1-9] \ d {17} | [1-9] \ d {16} x

To facilitate and avoid conflicts, we can create our own space in json format, as shown below:

/*var re = {email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/,number : /\d+/};re.email*/

The so-called gentle and new, can be a teacher, more contact. There are so many basic knowledge points for the regular expressions, and the writing is messy. please correct me.