Learning Objectives:
| Section number | knowledge | requirements |
|---|---|---|
| Section 1 What is a regular expression | What is a regular expression | To understand |
| Regular expression syntax | To understand | |
| The second section is regular expression progression | The modifier | master |
| Retrieval model | master | |
| The RegExp object | master | |
| Section 3 advanced regular expression | Regular expression advanced | master |
Regular expressions
1.1 Overview of regular expressions
Find and replace strings according to certain rules.
Regular expression concepts:
Regular Expression is a string retrieval pattern.
A regular expression is represented as a string.
Regular expressions are executed as follows:
Set the search rule through Parameter String to retrieve the string that matches the rule in Specified String.
Regular expressions are used to:
Can be used for text search and text replacement.
1.2 Basic Syntax of regular Expressions
The basic syntax of regular expressions
Syntax: / regular expression body/modifiers (optional)
For example, var frk_reg = /frank/gi;
Among them
(1)/frank/ I is a regular expression
(2) Frank is the body of the regular expression, indicating that the content to be retrieved is Frank
(3) I is a modifier of regular expression, indicating that the retrieval content is case insensitive
1.3 Common Usage of regular Expressions
Regular expressions are usually not used alone in actual development, but are combined with some methods to accomplish certain functions.
Because regular expressions are used to manipulate strings, they are usually used in conjunction with the search and replace methods of strings.
1.3.1 search method
The search method retrieves the substring that matches the regular expression and returns the starting position of the substring. I can’t find negative 1
Such as:
Searches the target substring using a regular expression in the specified string. And it’s case insensitive.
var str = ‘Hello Frank! GoodBye Frank! ‘;
var first_index = str.search(/frank/i);
console.log(first_index);
1.3.2 match method
The match() method retrieves a specified value within a string or finds a match for one or more regular expressions.
Returns an array of matching results
var str = ‘Hello Frank! GoodBye Frank! ‘; var first_index = str.match(/frank/gi); console.log(first_index);
1.3.3 the replace method
Replace method: Used to replace a substring matching the regular expression with a string in the specified string
Such as:
Replaces the target string in the specified string with a regular expression
var str = ‘Hello Frank! GoodBye Frank! ‘;
var newStr = str.replace(/frank/i,’frankenStein’);
console.log(newStr);
Obviously the replace method replaces the first string that matches, so we only replace the first Frank that matches the rule.
Second, regular expression progression
2.1 modifier
Modifiers are one of the makers of retrieval rules when regular expressions are used for string retrieval.
The modifier specifies how the re should be retrieved.
There are two common modifiers: I and G
The I modifier, which indicates that the regular retrieval of content is case insensitive
Such as:
Retrieve the first occurrence of frank’s subscript in STR using the I modifier
var str = ‘Hello Frank! GoodBye Frank! ‘;
var first_index = str.search(/frank/i);
console.log(first_index);
The result of this code is: 6
Retrieve the first occurrence of Frank’s subscript in STR without using the I modifier
var str = ‘Hello Frank! GoodBye Frank! ‘;
var first_index = str.search(/frank/);
console.log(first_index);
The result of the code execution is: -1
G modifier, indicating that the re retrieves content using a global match rather than stopping at the first one.
Such as:
Replace all Frank with frankenStein in STR, using the G modifier
var str = ‘Hello Frank! GoodBye Frank! ‘;
var newStr = str.replace(/frank/gi,’frankenStein’);
console.log(newStr);
The result of this code is: Hello frankenStein! GoodBye frankenStein!
Replace all Frank with frankenStein in STR without using the G modifier
var str = ‘Hello Frank! GoodBye Frank! ‘;
var newStr = str.replace(/frank/i,’frankenStein’);
console.log(newStr);
The result of this code is: Hello frankenStein! GoodBye Frank!
2.2 Retrieval Mode
The retrieval mode of a regular expression, which specifies how the regular retrieves content.
There are three common retrieval modes: expression mode metacharacter mode and quantifier mode.
They are not independent but complement each other, just as modifiers can be used together.
2.2.1 Expression mode
Patterns in which regular expressions are written using expressions are called expression patterns.
There are three common expression patterns:
a) [abc]
b) [0-9]
c) [m|n]
The content in each pattern represents a class of values, not a literal meaning.
A square bracket represents a character.
[ABC] : Searches the specified string for any character or string that meets the rule exists in square brackets.
Such as:
Replace all characters in STR that satisfy either a or b with (frank)
var str = ’12abc12ABC’;
var newStr = str.replace(/[ab]/gi,'(frank)’);
console.log(newStr); //12(frank)(frank)c12(frank)(frank)C
Regex can replace not only English but also Chinese regex
Var STR = ‘Hello, Frank! Goodbye, Frank! ‘;
Var newStr = str.replace(/[frank]/g,'(frank)’);
console.log(newStr); // Hello, (Frank)(frank)(frank)! Goodbye, (Frank)(Frank)(Frank)!
The re matches a string with multiple square brackets
Var STR = ‘Hello, Frank! Goodbye, Frank! ‘;
Var newStr = str.replace(/[fo][LAN][g]/g,'(frank)’);
console.log(newStr); // Hello, Frank! Goodbye, Frank!
[0-9]: Searches the specified string for any character or string that meets the rule between [0 and 9]. The same pattern applies to letters.
For example, replace all characters between 0 and 9 with (frank) in STR.
var str = ’12abc12ABC’;
var newStr = str.replace(/[0-9]/gi,'(frank)’);
console.log(newStr); //(frank)(frank)abc(frank)(frank)ABC
Replace all characters in STR with (frank) :
var str = ’12abc12ABC’;
var newStr = str.replace(/[a-z]/g,'(frank)’);
console.log(newStr); //12(frank)(frank)(frank)12ABC
Replace all characters in STR with (frank) :
var str = ’12abc12ABC’;
var newStr = str.replace(/[A-Z]/g,'(frank)’);
console.log(newStr); //12abc12(frank)(frank)(frank)
(x | y) : retrieval in the specified string, find any meet one to separate the options | 】 【 character or string.
Such as:
Replace all in STR: [ab or ABC string] with ‘(frank)’
var str = ’12abc12abABC’;
var newStr = str.replace(/(ab|ABC)/g,'(frank)’);
console.log(newStr); //12(frank)c12(frank)(frank)
[Img-yqorSvhs-1608536259202] (020901JS regular expression. Assets /clip_image012.png)
Ps: it is important to note that if you use | for regular search, use parentheses. Instead of brackets
2.2.2 Metacharacter mode
Metacharacters: Characters with special meanings are called metacharacters.
The pattern of regular retrieval by metacharacter is called metacharacter pattern.
There are three common metacharacter modes:
a) \w
b) \d
c) \s
d) \b
A metacharacter represents a character.
The \w metacharacter is used to find letters, numbers, and underscores.
A-z, A-z, 0-9, and underscore.
var *str* = ‘$12abc12a@@^*(*^bABC’; var *re* = *str*.match(/\w/g); *console*.log(*re*);
\W: Except letters, numbers and underscores
\d: Retrieves any character or string in the specified string.
Such as:
var str = ’12abc12abABC’;
var newStr = str.replace(/\d/g,'(frank)’);
console.log(newStr); //(frank)(frank)abc(frank)(frank)abABC
var str = ’12abc12abABC’;
var newStr = str.replace(/\d\d/g,'(frank)’);
console.log(newStr); //(frank)abc(frank)abABC
\D: Except for numbers
\s: Retrieves the specified string, looking for any character or string of the [is blank] rule
Such as:
var str = ‘ 12abc 12ab ABC ‘;
var newStr = str.replace(/\s/g,'(frank)’);
console.log(newStr); //(frank)12abc(frank)12ab(frank)ABC(frank)
var str = ‘ 12abc 12ab ABC ‘;
var newStr = str.replace(/\s\s/g,'(frank)’);
console.log(newStr); // 12abc 12ab ABC
\S: Except for blank characters
\b: Searches the specified string for any regular character or string