After reading it, you’ll get regular expressions

Time:2020-9-5

Show up

To match the text of the specified pattern
To protect the peace of the world
We are regular expressions that shuttle through the galaxy
That’s it, meow~

Easy to use regular expression visualization tool: https://regexper.com/

grammar

//Literal quantity
var regExp1 = /pattern/flags;

//Or use the constructor
var regExp2 = new RegExp(pattern[, flags]);

pattern: the matching pattern of a regular expression
flags: optional, the identifier of the regular expression, and more than one.gGlobal matching,iIgnore case,mMatch multiple lines

A super simple Chestnut:

var regExp = /abc/;
"abcdefg".replace(regExp, "WOW"); // "WOWdefg"

Common special characters

1. Character set

character give an example meaning
[] [xyz] Any character in XYZ is equivalent to [x-z]
[^] [^xyz] Matching any character that is not in XYZ is equivalent to [^ x-z] (note that it is different from ^ x, which means matching characters starting with x)
[-] [1-3] Matching any character in 123 is equivalent to [123].Note: hyphens only appear in square brackets to indicate a continuous sequence of characters.

2. Predefined mode

Predefined patterns are abbreviations for some common patterns.

character meaning
. Any character other than the one used in the operation is equivalent to
\d Numbers 0-9, equivalent to [0-9]
\D Non numeric character, equivalent to [^ 0-9]
\w Alphanumeric underline, equivalent to [a-za-z0-9_]
\W Non alphanumeric underline, equivalent to [^ a-za-z0-9 \
\s Blank character
\S Non blank character
\n Line break

3. Characters that need to be escaped

In regular mode, you need to escape with a slash:

* + ? $ ^ . | \ ( ) { } [ ]

It is important to note that if you use the regexp method to generate regular objects, you need to use two slashes to escape, because the inner string will be escaped once.

4. Boundary

character give an example meaning
^ ^a Start with a (note that it is distinguished from [^], which means matching elements that are not in [^])
$ a$ End with a
\b \bsmart,smart\b The word boundary is [a-za-z0-9]_ ]Characters other than
\B \Bsmart Non word boundary

Take a chestnut and say:

"You are smart, but she is smarter.".replace(/smart\b/,"kind");
//"You are kind, but she is smarter."

"You are smart, but she is smarter.".replace(/smart\B/,"kind");
//"You are smart, but she is kinder."

if(seeDon’t understand) {just put a fewDo itTry it_ •́)ง }

5. Quantifier

character meaning
? Match previous pattern 0 or 1 times {0,1}
* Match previous pattern 0 or more than once {0,}
+ Match previous pattern 1 or more than once {1,}
{n} Match the previous pattern n times
{n,} Match the previous pattern at least N times
{n,m} Match the previous pattern at least N times and at most m times
{0,m} Match the previous pattern up to m times
x(?=y) X is matched only if x is followed by Y, but y is not part of the result. for example/smart(?=girl)/Only at the backgirlMatch only whensmart, butgirlNot part of the match.
x(?!y) X is matched only if x is not followed by y. for example/\d+(?!\.)/A number is only matched if it is not followed by a decimal point,/\d+(?!\.)/.exec("3.141")The matching result is141

6. Greed and laziness (non greed)

The default is greedy pattern matching, which matches as many characters as possible.

var regExp1 = /\d{3,6}/;
"1234567890".replace(regExp1, "X");
//"X7890"

If you want to manually turn on lazy mode, you need to add?

var regExp1 = /\d{3,6}?/;
"1234567890".replace(regExp1, "X");
//"X4567890"

7. Grouping and reverse reference

Grouping is also called “subexpression”. Dividing a complete regular expression into groups and then using “group number” to refer to these groups is called “reverse reference”.

For example:

//No grouping
Var regexp1 = / ABC {2} /; // in this way, the quantifier {2} can only match one character of C

//Grouping
Var regexp2 = / (ABC) {2} /; // in this way, the quantifier {2} can match the three characters of ABC 
//ABC also has a group number of $1

Another Chestnut:

var reg = /(\d{1}).*(\d{2}).*(\d{3})/;
"1sss23sss456".replace(reg,"$1?$2?$3");
//"1?23?456"

The upper chestnuts are used in a different way:

var reg = /(\d{1}).*(\d{2}).*(\d{3})/;
var result = reg.exec("1sss23sss456");
console.log(result[1]+"-"+result[2]+"-"+result[3]);
//"1-23-456"

Group matching is very useful. Here is an example of matching a web page tag:

Var tagName = / < ([^ >] +) > [^ <] * < \ / \ 1 > /; // 1 is the content of the first group match
tagName.exec("<b>bold</b>")[1]

With a little modification of the above code, you can capture tags with attributes:

var html = '<b class="hello">Hello</b><i>world</i>';
var tag = /<(\w+)([^>]*)>(.*?)<\/>/g;

var match = tag.exec(html);

match[1] // "b"
match[2] // " class="hello""
match[3] // "Hello"

match = tag.exec(html);

match[1] // "i"
match[2] // ""
match[3] // "world"

Non capture group:(?:x)Indicates that the matching content of the group is not returned, that is, the bracket does not appear in the matching result.

common method

Methods of regular objects

1.RegExp.prototype.test()

Tests whether the current regular can match the target string and returns a Boolean value.

var reg = /\d{2}/;
var str = "1sss23sss456";
reg.test(str); //true

2.RegExp.prototype.exec()

Performs a regular match operation in the target string and returns the matched substring.

var reg = /\d{2}/;
var str = "1sss23sss456";
var result = reg.exec(str); 
result[0]; //23
result.index; //4
result.input; //"1sss23sss456"

3.RegExp.prototype.toString()

Returns a string whose value is the literal form of the regular object. Covered Object.prototype.toString () method.

var reg = /\d{2}/;
reg.toString(); // "/\d{2}/"

Object of the string method

1. str.replace()

Returns the replaced value

var reg = /\d{2}/;
var str = "1sss23sss456";
str.replace(reg,"?"); //"1sss?sss456"

Often used to eliminate leading and trailing spaces:

var str = '  abc def ggg   ';
str.replace(/^\s+|\s+$/g, '');
// 'abc def ggg'

replaceThe second parameter of the method can use the dollar sign to refer to what is being replaced:

>$& refers to the matching substring.
>$` refers to the text before the match result.
>$'refers to the text after the match result.
>$n refers to the nth group content that matches successfully, and N is a natural number starting from 1.
>$$refers to the dollar sign $.

replaceThe second argument to the method can also be a function, replacing each match with the return value of the function. This function can accept multiple parameters. The first parameter is the captured content, and the second parameter starts with the captured group matching (the number of group matches corresponds to the number of parameters). In addition, two parameters can be added, the penultimate is the position of the captured content in the whole string, and the last parameter is the original string. Here is an example of web page template replacement:

var prices = {
  'pr_1': '$1.99',
  'pr_2': '$7.99',
  'pr_3': '$9.99',
};

var template = '<span id="pr_1"></span><span id="pr_2"></span>';

template.replace(
  /(<span id=")(.*?)(">)(<\/span>)/, 
  function(match, p1, p2, p3 ,p4) {
    return p1 + p2 + p3 + prices[p2] + p4;
  });
//<span id="pr_1">$1.99</span><span id="pr_2"></span>

Note: add the second group?Turn on lazy mode, otherwise the default greedy pattern of the regular expression will match as many characters as possible. In greedy mode, the second group in the above example matches thepr_1"></span><span id="pr_2This is a long string, so we can’t match the string we want.

2.match()

Andexec()Similarly, returns a matching substring.

var reg = /\d{2}/;
var str = "1sss23sss456";
str.match(reg); //["23"]

Andexec()The difference is that when a regular expression has a G identifier, the result is different. Look at chestnuts

var reg = /\d{2}/g;
var str = "1sss23sss456";
reg.exec(str); //["23"]
str.match(reg); //["23","45"]

3.search()

Returns the position of the first character that matches.

var reg = /\d{2}/;
var str = "1sss23sss456";
str.search(reg); //4

4.split()

Returns the split array.

var reg = /\d{2}/;
var str = "1sss23sss456";
str.split(reg); //["1sss","sss","6"]

Little exercise

  1. Write a regular matching mobile phone number (the first digit is 1, the second digit is one of [3,4,5,7,8], and there are 9 digits after it)

  2. Write a regular expression that matches the date format 2017-01-01 or 2017 / 01 / 01

————Answer:

  1. /^1[34578]\d{9}$/

  2. /^\d{4}[-/]\d{2}[-/]\d{2}$/

application

1. Use regular to change data structure

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr); //Smith, John

2. Use regular expressions in multiple lines

var s = "Please yes\nmake my day!";
s.match(/yes.*day/); // null
s.match(/yes[^]*day/); //'yes\nmake my day'

3. Extract subdomain name from URL

var url = "http://xxx.domain.com";
console.log(/[^.]+/.exec(url)[0]); //  "http://xxx"
console.log(/[^.]+/.exec(url)[0].substr(7)); //  "xxx"

Matches any element except. One to more characters.

“If you don’t know how to use it, you have not learned it”. I warmly welcome you to add some regular expressions in the comments section. Then I will add them to the article and collect them together

reference resources:

1. Notes on regular expression learning

2. MDN regexp document

3. Real JS regular expression

4. Regular expression 30 minute introductory course

Recommended Today

JS function

1. Ordinary function Grammar: Function function name (){ Statement block } 2. Functions with parameters Grammar: Function function name (parameter list){ Statement block } 3. Function with return value Grammar: Function function name (parameter list){ Statement block; Return value; } Allow a variable to accept the return value after calling the function Var variable name […]