Js regular theory and practice

When learning regular expressions, I can say that regular expressions are not very difficult, but I just can’t remember the grammar rules. I believe you have the same discovery with me, but there is no way, the things that need patience can only be chewed several times.

Functions of regular expressions

• Data validation.
• Complex string search and replace.
• Extract substrings from strings based on pattern matching.

An overview of the

Regular expressions include ordinary characters (for example, letters between a and Z) and special characters (called metacharacters).

To match these special characters, you must first escape the character, that is, precede the character with the backslash character \**. For example, to search for the “+” text character, use the expression \+. However, most special characters lose their original meaning and revert to normal characters when they appear inside bracket expressions.

The constructor

We can use literals or built-in constructors:

var regex = new RegExp('xyz'.'i');
var regex = new RegExp(/xyz/i); 
var regex = /xyz/i; Copy the code

Re = new RegExp(“\ w+”) // Where \ is escaped, re = /\w+/ / so there is no need to escape;

The String method for pattern matching

• String.search()
  
  Parameter: a substring to search for, or a regular expression.
  
  Returns:The starting position of the first substring that matches the argument. If not found, -1 is returned.
  
  Note: Global search is not supported, and if the argument is a string, it is first converted to a regular expression using the RegExp constructor. Such as:

  var str="i am jay"; 
  var res=str.search("jay");
  console.log(res); //5
  console.log(str.search("hz"); / / 1Copy the code

• String.replace(), in my opinion, is the most powerful API function in regex: find and replace strings. The first argument: a string or regular expression, and the second argument: a string to replace, or a function. Usage:

When the second argument is a string, the $character in the replacement text has a special meaning:

Such as:

'abc'.replace(/b/g, "{? $` $& $'}") // The result is"a{$abc}c"In other words, b is replaced by {$abc}Copy the code

"1234, 2345, 3456".replace(/(\d)\d{2}(\d)/g, function (match, The $1.$2, index, input) {
        console.log([match, The $1.$2, index, input]); }); / / = > ["1234"."1"."4", 0, "1234, 2345, 3456"] / / = > ["2345"."2"."5", 5, "1234, 2345, 3456"] / / = > ["3456"."3"."6"Ten,"1234, 2345, 3456"] Copy the code

• String.match() argument: the substring to search for, or a regular expression. Return: an array of matching results. Depends on whether or not there is a modifier g

Non-global retrieval: null if no matching text is found; Otherwise, the first element of the array is the matching string, and the rest is the subexexpressions in parentheses, that is, a[n] holds the contents of $n. Non-global retrieval returns three properties: the length property; The index property declares the position of the first character of the matched text; The input property holds the retrieved string.

Global retrieval: Set the flag G to return all matching substrings, that is, no information about the subexpression is provided. There is no index or input property.

Such as:

var string = "2017.06.27"; var regex1 = /\b(\d+)\b/; var regex2 = /\b(\d+)\b/g; console.log( string.match(regex1) ); console.log( string.match(regex2) ); / / = > ["2017"."2017", index: 0, input: "2017.06.27"] / / = > ["2017"."6"."27"] 
Copy the code

• String.split() : split() : split() : split() : split() : split() : split() : split() : split() : split() : split(); A regular expression, or string, can have a second argument that indicates the maximum length of the result array and that the result array contains separators when the regular is used. Returns an array of: substrings.

The method of the RegExp

• Regexpobject.exec (), which is more powerful than match with the argument: string. Returns:

Non-global retrieval: Same as string.macth () non-global retrieval, returns an array or null.

Global retrieval: Although it is a globally matched regular expression, the exec method matches the specified string only once. But it can be called repeatedly to achieve global retrieval. Start retrieving the string at the character specified in the lastIndex property of RegExpObject; After a match, lastIndex is updated to the position next to the last character of the matched text; When no matching text is found, null is returned and the lastIndex property is reset to 0.

var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
var result;
while( result = regex2.exec(string) ) { console.log( result, regex2.lastIndex ); } / / = > ["2017"."2017", index: 0, input: "2017.06.27"] 4
// => ["6"."6", index: 5, input: "2017.06.27"] 7
// => ["27"."27", index: 8, input: "2017.06.27"10]Copy the code

• Regexpobject.test (), matches the string argument: string. Returns: true or false.

• Regexpobject.tostring () returns: a string

These two are simpler, so I won’t go into them.

character

| instructions to choose between two or more items. Similar to or in JS, also known as branching conditions. / The beginning or end of a regular expression pattern. \ backslash character, used for escape. – Hyphen Indicates A range within the character group []. For example, [a-z] indicates the range from A to Z. To represent the common character – in a character group, place it at the beginning or end of the character group.

Matches any single character other than the newline \n character. \d is equivalent to [0-9] and matches 0 to 9 characters. \D is equivalent to [^0-9] and opposite to \D. \s matches whitespace. In contrast to the \ S

\w matches any of the following characters: a-z, a-z, 0-9, and underscore, which is equivalent to [a-za-z0-9].

Qualifier (quantifier character)

Displays the qualifier in curly braces {} and contains a numeric value indicating the upper and lower limits of occurrence; * +? These three characters belong to the single-character qualifier:

{n} matches exactly n times. {n,} matches at least n times. {n,m} matches at least n and at most m times. * equivalent {0,} + equivalent {1,}? Equivalent {0, 1}

Note:

• There must be no space between comma and number in the display qualifier, otherwise null is returned!
• Greedy quantifiers * and + : Javascript defaults to greedy matching, which means matching repeated characters as many times as possible.
• Lazy (least repeated match) quantifiers?: When non-greedy matching is performed, only one is required after the character to be matched?Can. Such as:

  var reg = /a+/; var reg2 = /a+? /; var str ='aaab'; str.match(reg); / / /"aaa"] str.match(reg2); / / /"a"]Copy the code

Anchor point (anchor character, boundary)

^ Match start position. Using ^ as the first character in the parenthesis [] expression inverts the character set. $matches the position at the end. \b matches a word boundary, such as er\b matches the “er” in “never”, but not the “er” in “verb”. \B Non-boundary word matching.

tag

• Brackets [] character group; Mark the beginning and end of parenthesis expressions. […]. Matches any character in square brackets. Many characters lose their original meaning in [] : [^…] Matches any character not in square brackets; [?.] matches ordinary question marks and periods. Note: The backslash character \ is still an escape character in []. To match the backslash character, use two backslashes \\. Also, don’t abuse the meaningless character group feature. For example, don’t use [.] instead of the \: escape dot, because of the cost of dealing with the character group.

• Curly braces {} mark the beginning and end of a qualifier expression.

• The parentheses () mark the beginning and end of subexpressions and are used to group and distinguish the contents.

(pattern) can remember the matches that match this pattern (capture group). Do not abuse parentheses. If you do not need to save subexpressions, use non-trapping parentheses (? 🙂 for performance tuning. (? : pattern) matches the pattern, but does not save the match (non-captured grouping). (? = pattern) zero-width forward first assertion that matches the search string that matches the pattern. Once a match is found, the search for the next match begins before the text is matched; Matches are not saved. (? ! Pattern) zero-width negative-first assertion that matches a search string that does not match the pattern. Once a match is found, the search for the next match begins before the text is matched; Matches are not saved.

It might be a little hard to understand, but it doesn’t matter, I’ll give you a few examples and you’ll see what it means

The following are the differences between capture and non-capture groups:

'13588884444'.replace(/(\d{3})(\d{4})(\d{4})/g, '$1 $3 * * * *') / / = >"135 * * * * 4444"
'13588884444'.replace(/(\d{3})(? :\d{4})(\d{4})/g,'$1 $2 * * * *') / / = >"135 * * * * 4444"
Copy the code

Preemptive assertion (? = pattern) : x matches only before y and must be written as /x(? = y) /. Explanation: Find an X that has a y after it. Antecedent negative assertion (? ! Pattern) : x matches only if it does not precede y and must be written as /x(? ! / y). Explanation: Find an x with no y after it.

For example, a global search for “is” followed by “all” :

var str="Is this all there is"; var patern=/is(? = all)/g; console.log(str.match(pattern)); / / /"is"]Copy the code

var s = "i am jay"; var p = /j(? ! ay)/g; s.match(p) //nullCopy the code

• Backreference: The main function is to add the identifier \n to the group.
  
  \nRepresents the reference character that matches the character first matched by the NTH subexpression.

An example of a backreference would be to write a re that matches one of the following formats:

The 2016-06-12 2016/06/12 2016.06.12

The first re you might think of is:

var regex = /\d{4}(-|\/|\.) \d{2}(-|\/|\.) \d{2}/;Copy the code

Where/and. Require an escape. It matches the situation, but it also matches data like “2016-06/12”.

What if we wanted to make the separator consistent? In this case, use a backreference:

var regex = /\d{4}(-|\/|\.) \d{2}\1\d{2}/; var string1 ="2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false 
Copy the code

Notice \ 1, said a reference before the group (- | \ / | \.) . No matter what it matches (such as -), \1 matches that same specific character. Now that we know the meaning of \1, we understand the concept of \2 and \3, which refer to the second and third groups respectively.

Priority order

1. \Escape character
2. (), (? :), (? =), []Parentheses and brackets
3. *, +,? , {n}, {n,}, {n,m}qualifiers
4. Any metacharacter^, $, \Anchor points and sequences
5. |replace

practice

Take a look at the following examples after reading the introduction, and feel free to specify in the comments section!!

1. Matches a hexadecimal color value