Get Started
There are two ways to create a regular expression in JS:
-
Use a regular expression literal that consists of patterns contained between slashes, as follows:
var re = /ab+c/; Copy the code -
Or, via the RegExp constructor, new a regular expression:
const reg = new RegExp('ab+c'); Copy the code -
Using regular expressions
const reg = new RegExp('abc'); const str = 'helloabcword'; reg.test(str); reg.exec(str); str.match(reg); str.matchAll(reg); str.replace(reg, ' '); str.search(reg); str.split(reg); Copy the code
A simple model
The simple pattern is to go straight to the structure you want to match. / ABC/matches all abCs in the helloABC1231abckj string. The characters must be in the same order, that is, / ABC/matches only ABC, but not BCA or BAC.
const reg = /abc/;
// Tests whether a string matches a re
reg.test('abc'); //true
reg.test('abcdef'); //true
reg.test('12313abcdef'); //true
reg.test('12313ab1cdef'); //false
Copy the codeSpecial characters
Only matching a fixed character structure can achieve limited functions, so regular expressions also provide many special characters, with which rich matching can be achieved. According to its function, it can be divided into character set, character class, group, quantifier and assertion. Note that special characters already have special functions. To match special characters, escape is required. For example, to match \d, \d is a special character that needs to be escaped, and the re should be /\\d/.
Character set
When need to match a variety of possible, such as to match a or b characters, you can use pipe | or character set [].
|In JS||Similarly, one between two.[]Denotes a character set or range. Characters within brackets, or within the range of the character set described by brackets, are matched./a|b|c/or/[abc]/Is the matchaorborcIf you want to match all numbers or all letters, do you need to list all numbers, like this/ [0123456789]？
There’s a handy way to write it:
/ [0-9]with/ [0123456789]The effect is complete consistent, matching all numbers./[a-z]/Matches all lowercase letters./[A-Z]/Matches all uppercase letters./[a-zA-Z]/Matches all letters./[a-zA-Z0-9]/Matches all letters and numbers./[a-zA-Z0-9_]/Matches alphanumeric and underscore with/\w/The effect is consistent,\wIs a special character, more on this later./[^a-zA-Z]/Matches non-alphabetic characters, here^Indicates not, that is, matches characters not contained in brackets.
Need to note that some special characters in a character set is no longer a special characters, for example, / / b | a means to match b, | and the three characters.
const str = 'Hi, your 6 apples is 10_$';
// g represents the flag, which will query the entire string. If not, the search will stop when the first matching character is found, as described below
const reg1 = /a|b|c|d/g;
console.log(str.match(reg1)); //[ 'a' ]
const reg2 = /[abcd]/g;
console.log(str.match(reg2)); //[ 'a' ]
const reg3 = /[0-9]/g;
console.log(str.match(reg3)); // ['6', '1', '0']
const reg4 = /[a-z]/g;
console.log(str.match(reg4)); // [ 'i', 'y', 'o', 'u', 'r', 'a', 'p', 'p', 'l', 'e', 's', 'i', 's' ]
const reg5 = /[A-Z]/g;
console.log(str.match(reg5)); // [ 'H' ]
const reg6 = /[0-9a-zA-Z_]/g;
console.log(str.match(reg6));
//['H', 'i', 'y', 'o', 'u', 'r', '6', 'a', 'p', 'p', 'l', 'e', 's', 'i', 's', '1', '0', '_'];
const reg7 = /\w/g;
console.log(str.match(reg7));
//['H', 'i', 'y', 'o', 'u', 'r', '6', 'a', 'p', 'p', 'l', 'e', 's', 'i', 's', '1', '0', '_'];
const reg8 = /[^a-zA-Z]/g;
console.log(str.match(reg8));
/ / / ', ', ' 'and', '6', ', ', ', '1', '0', '_', '$']
Copy the codeCharacter classes
A character class is a special character that matches a certain type of character.
.Matches a single arbitrary character
. Matches a single arbitrary character other than the line terminators (\n, \r, \u2028, \u2029), but in the character set, it matches only., that is, in the character set. No longer special characters.
const reg = /./g;
const str = '1aA./|`\n1a,';
console.log(str.match(reg));
// [ '1', 'a', 'A', '/', '|', '`', '1', 'a', ',' ]
const reg1 = /\./g;
console.log(str.match(reg1)); / / / '. '
const reg2 = /[.]/g;
console.log(str.match(reg2)); / / / '. '
Copy the code\dMatching a single number
\d matches a single digit. D, short for digital, is equivalent to [0-9].
const str = 'zd1`2asd123';
const reg = /\d/g;
const reg1 = /[0-9]/g;
console.log(str.match(reg)); // ['1', '2', '1', '2', '3']
console.log(str.match(reg1)); // ['1', '2', '1', '2', '3']
Copy the code\DMatches a single non-number
\D matches a single non-numeric character, equivalent to [^0-9]
const str = 'zd1`2asd123';
const reg = /\D/g;
const reg1 = /[^0-9]/g;
console.log(str.match(reg)); // [ 'z', 'd', '`', 'a', 's', 'd' ]
console.log(str.match(reg1)); // [ 'z', 'd', '`', 'a', 's', 'd' ]
Copy the code\wMatches a single alphanumeric underscore
\w matches a single digit underscore character. W can be denoted as the abbreviation of Word and is equivalent to [0-9a-zA-z_]
const str = 'zd1`As@_d)123';
const reg = /\w/g;
const reg1 = /[0-9a-zA-Z_]/g;
console.log(str.match(reg));
// [ 'z', 'd', '1', 'A', 's', '_', 'd', '1', '2', '3' ]
console.log(str.match(reg1));
// [ 'z', 'd', '1', 'A', 's', '_', 'd', '1', '2', '3' ]
Copy the code\WMatches a single non-alphanumeric underscore
\W matches a single non-alphanumeric underscore character, equivalent to [^ 0-9a-za-z_].
const str = 'zd1As@_d)123';
const reg = /\W/g;
const reg1 = /[^0-9a-zA-Z_]/g;
console.log(str.match(reg)); // ['@', ')']
console.log(str.match(reg1)); / / / '@', ') '
Copy the codeNon-print character
Non-printed characters can also be part of a re. These non-printed characters include:
\cxMatched byxSpecifies a single control character, such as\cMMatch aControl-MOr carriage return. Details seeControl characters.\fMatches a single feed character, equivalent to\x0c和\cL.\nMatches a single newline character, equivalent to\x0a和\cJ.\rMatching a carriage return is equivalent to\x0d和\cM.\tMatches a single TAB character, equivalent to\x09和\cI.\vMatching a vertical TAB character is equivalent to\x0b和\cK.
const str = ` `;
const str1 = '\t';
const reg = /\n/g;
const reg1 = /\t/g;
console.log(str.match(reg)); // [ '\n', '\n' ]
console.log(str1.match(reg1)); //[ '\t' ]
Copy the code\sMatch the blank space
\s matches a single space character, including space, TAB, page feed, line feed, carriage return, and Unicode whitespace. Equivalent to [\f\n\ R \t\ vu00A0 \u1680\u2000-\u200a\u2028\u2029\ u202F \u205f\u3000\ufeff].
const str = ` `;
const str1 = '\t\v12\r\n';
const reg = /\s/g;
console.log(str.match(reg)); // [ '\n', '\n' ]
console.log(str1.match(reg)); //[ '\t', '\u000b', '\r', '\n' ]
console.log('\v'.charCodeAt(0).toString(16)); // b
Copy the code\SMatch non-space
\S matches a single non-space character, equivalent to [^\f\n\ R \t\v\ u00A0 \ U1680 \u2000-\u200a\ U2028 \u2029\ u202F \u205f\u3000\ufeff].
const str1 = '\t\v12\r\n';
const reg = /\S/g;
console.log(str1.match(reg)); // ['1', '2']
Copy the code\character
The \ character has two meanings according to the character that follows it:
- When it is followed by an ordinary character, it may be combined with the ordinary character to form a special character, such as
\d.\withdTogether, they form numeric special characters. - When followed by a special character, the system escapes the following special character and changes it to a common character
A \ *.\will*This special character is escaped, making it a normal character, matching*This notation.
const str = 'aas(das*[\\';
const reg = /\*/g;
const reg1 = /\w/g;
const reg2 = /\\/g;
console.log(str.match(reg)); / / / '*'
console.log(str.match(reg1)); // [ 'a', 'a', 's', 'd', 'a', 's' ]
console.log(str.match(reg2)); / / / '\ \'
Copy the codeCapture groups and non-capture groups
What happens when you want to match one of two strings, such as a Hello or word string? You can use either a capture group (x) or a non-capture group (? : x).
-
The difference between capture groups and non-capture groups
The difference between the two is that the capture group will remember the group matches, resulting in a loss of performance. When the matching content in the group is not needed, the non-capture group should be used as much as possible.
const str = 'My First Program: Hello World'; const reg1 = /(Hello)|(World)/g; console.log(str.match(reg1)); // [ 'Hello', 'World' ] const reg2 = / (? :Hello)|(? :World)/g; console.log(str.match(reg2)); // [ 'Hello', 'World' ] Copy the codeFrom the above results, there seems to be no difference between capturing and non-capturing groups. This is because using the g global match flag, the match function does not return the capture group information during the global match. MatchAll can be used instead. Try the next interview in the case of non-global matching:
const reg3 = /(Hello) (World)/; console.log(str.match(reg3)); // ['Hello World','Hello','World',(index: 19),(input: 'My first program: Hello World'),(groups: undefined)]; // ['Hello World','Hello','World',(index: 19),(groups: undefined)]; const reg4 = / (? :Hello) (? :World)/; console.log(str.match(reg4)); // ['Hello World',index: 19,input: 'My first program: Hello World',groups: undefined] Copy the codeAs you can see, Reg3 returns the complete matching string Hello World and the capture groups Hello and World substrings, while reg4 returns only the complete string.
-
Named capture group
When there are multiple nested capture groups,match returns the results in their order. This makes it inconvenient to get the results of a match from a particular group. < name >). Look at the following example:
// Take out the QQ id in front of the QQ mailbox, you can use zero width assertion, here use capture group const str2 = '[email protected]'; const reg5 = / (+)/(@ (. +)); console.log(str2.match(reg5)); // [ '[email protected]','112123232','@qq.com','qq.com',index: 0,input: '[email protected]',groups: undefined ] const reg6 = / (?.+)(?; console.log(str2.match(reg6).groups); // { code: '112123232', domain: 'qq.com', suffix: '@qq.com' } Copy the code@(? .+))/ -
Group matching results are backreferenced
If there is a string < div > div the value of the < div > < span > < span > span of values, start and end tags are the same, in the middle is the content of it, and how to take out the value of the div and span values of these two values, this time will need to use special characters \ n, where n is an integer greater than zero, \n will backreference the result of the NTH group match. Here is an example:
const str = '<div>12313<div><span>789<span>'; const reg = /(<(\w+)>)(.+)\1/g; // \1 references the first group <(\w+)> matching contents, 12313 / / in the matching < div > < div >, (< > (\ w +))/(. +) \ 1 / quite turned into a < div > < div > (. +) / / in matching < span > < span > 789, / (< > (\ w +)). (+) / 1 / become < span > < span > (. +) let res; while ((res = reg.exec(str))) { console.log(res); } // ['<div>12313<div>', '<div>', 'div', '12313']; // ['<span>789<span>', '<span>', 'span', '789']; Copy the code
quantifiers
Both character sets, character classes, and groups match a single number. What if we need to match multiple items (character sets, character classes, or groups), for example, multiple consecutive numbers at once? This requires quantifiers, which indicate the number of characters or expressions to be matched.
*Matches any number of characters
The * character matches any number of characters or expressions.
const reg = /a*/g;
// Match 1, 0 number of a, so return ' ', same as match 2
console.log('12aa45aa'.match(reg)); // [ '', '', 'aa', '', '', 'aa', '' ]
const reg1 = /\w*/g;
console.log('ui1213m'.match(reg1)); // [ 'ui1213m', '' ]
const reg2 = /\d*/g;
console.log('a1231ad12'.match(reg2)); // [", '1231', ", ", '12', "]
const reg3 = /(\$\d)*/g; // Match $+ a number any time, like $1;
console.log('1 $1 $3'.match(reg3)); // ['', '$1$3', '']
const reg4 = /[1-5a]*/g;
console.log('yu8912a1234'.match(reg4)); // [ '', '', '', '', '12a1234', '' ]
Copy the codeTake 12AA45AA to match /a*/g as an example, match from the first character 1, match 0 as, return null characters, all the way to aa, match two as.
+Match more than one ampersand
+ Matches one or more characters or expressions.
const reg = /a+/g;
console.log('12aa45aa'.match(reg)); // [ 'aa', 'aa' ]
const reg1 = /\w+/g;
console.log('ui1213m'.match(reg1)); // [ 'ui1213m' ]
const reg2 = /\d+/g;
console.log('a1231ad12'.match(reg2)); // ['1231', '12']
const reg4 = /[1-5a]+/g;
console.log('yu8912a1234'.match(reg4)); // [ '12a1234' ]
Copy the code?Matches an ampersand below
? Character matches 0 or 1 character or expression.
const reg = /a? /g;
console.log('12aa45aa'.match(reg));
//[ '', '', 'a', 'a', '', '', 'a', 'a', '' ]
const reg1 = /\w? /g;
console.log('ui1213m'.match(reg1));
// [ 'u', 'i', '1', '2', '1', '3', 'm', '' ]
const reg2 = /\d? /g;
console.log('a1231ad12'.match(reg2));
/ / / ', '1', '2', '3', '1', ', ', '1', '2', ']
const reg4 = /[1-5a]? /g;
console.log('yu8912a1234'.match(reg4));
// [ '', '', '', '', '1', '2', 'a', '1', '2', '3', '4', '' ]
Copy the code{n}Match the n
{n} matches n characters or expressions.
const reg = /a{2}/g;
console.log('12aa45aa'.match(reg)); //[ 'aa', 'aa' ]
const reg1 = /\w{3}/g;
console.log('ui1213m'.match(reg1)); //[ 'ui1', '213' ]
const reg2 = /\d{3}/g;
console.log('a1231ad12'.match(reg2)); / / / '123'
const reg4 = /[1-5a]{4}/g;
console.log('yu8912a1234'.match(reg4)); //[ '12a1' ]
Copy the code{n,}More than n entries must be matched
{n,} matches a character or expression at least n times.
const reg = /a{2,}/g;
console.log('12aa45aa'.match(reg)); //[ 'aa', 'aa' ]
const reg1 = /\w{3,}/g;
console.log('ui1213m'.match(reg1)); //[ 'ui1213m' ]
const reg2 = /\d{3,}/g;
console.log('a1231ad12'.match(reg2)); / / / '1231'
const reg4 = /[1-5a]{4,}/g;
console.log('yu8912a1234'.match(reg4)); //[ '12a1234' ]
Copy the code{n,m}Match the n – m
{n,m} matches a character or expression n to m times. N is an integer greater than or equal to 0, and m is an integer greater than or equal to 0.
const reg = / a/g {1, 5};
console.log('12aa45aa'.match(reg)); //[ 'aa', 'aa' ]
const reg1 = / {3, 5} \ w/g;
console.log('ui1213m'.match(reg1)); //[ 'ui121' ]
const reg2 = / \ d {1, 5} / g;
console.log('a1231ad12'.match(reg2)); // ['1231', '12']
const reg4 = / [1-5 - a] {4, 9} / g;
console.log('yu8912a1234'.match(reg4)); //[ '12a1234' ]
Copy the codeNon-greedy model
Match (/a{2,5}/) will return [‘aaaaa’]. The re will allow matching 2-5 as, It will match as many as it can in the case that it satisfies the re, but there are other cases where we want to make it non-greedy, where it satisfies the re and then it goes to the next match, and in those cases we can put a quantifier, right? , indicating a non-greedy match.
console.log('aa45aa'.match(/a*/g)); //[ 'aa', '', '', 'aa', '' ]
console.log('aa4aa'.match(/a*? /g)); //[", ", ", ", ", ", ", "]
console.log('ui1213m'.match(/\w+/g)); //[ 'ui1213m' ]
console.log('ui1213m'.match(/\w+? /g)); //[ 'u', 'i', '1', '2', '1', '3', 'm' ]
console.log('1a12'.match(/\d? /g)); // ['1', '1', '1', '2', '']
console.log('1a12'.match(/\d?? /g)); // [", ", ", ", ", "]
console.log('helloo'.match(/o{2}/g)); // [ 'oo' ]
console.log('helloo'.match(/o{2}? /g)); // [ 'oo' ]
console.log('aaaaaaaa'.match(/ a/g {2, 5})); // [ 'aaaaa', 'aaa' ]
console.log('aaaaaaaa'.match(/ a {2, 5}? /g)); // [ 'aa', 'aa', 'aa', 'aa' ]
Copy the codeFlags
/a{2}/g. What does this g represent? The g is an argument to the regular expression and represents a global search, meaning that the entire string is searched, rather than being stopped when the first substring is found. In addition to g, regular expressions provide five additional optional arguments (flags) to allow global and case-insensitive searches, etc. These parameters can be used alone or together in any order and are included in the regular expression instance.
| mark | describe |
|---|---|
| g | Global search. |
| i | Case insensitive search. |
| m | Multi-line search, ^ can also match the beginning of a newline, $can also match the end of a line |
| s | Allows. To match newline characters. |
| u | Matches using patterns of Unicode codes. |
| y | Perform a “sticky” search, matching from the current position of the target string. |
console.log('abcABC'.match(/abc/g)); // [ 'abc' ]
console.log('abcABC'.match(/abc/gi)); // [ 'abc', 'ABC' ]
console.log('abc\nABC'.match(/^\w+$/g)); // null
console.log('abc\nABC'.match(/^\w+$/gm)); //[ 'abc', 'ABC' ]
Copy the codeZero width assertion
One of the components of a zero-width assertion is the boundary, which matches the boundaries of text, words, or patterns, which by itself does not match anything, namely the zero width.
^Matches the beginning of the string
Use ^ when determining whether a string begins with a letter. Note that in multi-line matching mode (flags = m), ^ also matches a newline character.
let fruits = ['Apple'.'Watermelon'.'Orange'.'Avocado'.'Strawberry'];
// Use the re /^A/ to filter out fruit starting with 'A'.
let fruitsStartsWithA = fruits.filter((fruit) = > /^A/.test(fruit));
console.log(fruitsStartsWithA); // [ 'Apple', 'Avocado' ]
// Use re /^[^A]/ to select fruit that does not begin with 'A'
// 1) The first ^ matches the beginning of the input
// 2) ^ = 'not'; [^A] = 'A'
let fruitsStartsWithNotA = fruits.filter((fruit) = > /^[^A]/.test(fruit));
console.log(fruitsStartsWithNotA); // [ 'Watermelon', 'Orange', 'Strawberry' ]
const str = 'hello world\nhello my world';
console.log(str.match(/^hello/g)); // [ 'hello' ]
// In multi-line mode ^ also matches the end of a newline character
console.log(str.match(/^hello/gm)); // [ 'hello', 'hello' ]
Copy the code$Matches the end of the string
$is used to determine whether a string ends in a string. Similar to ^, $matches the beginning of a newline in multi-line mode.
let fruits = ['Apple'.'Watermelon'.'Orange'.'Avocado'.'Strawberry'];
// Use the re /o$/ to filter out fruit ending in 'o'.
let fruitsStartsWithA = fruits.filter((fruit) = > /o$/.test(fruit));
console.log(fruitsStartsWithA); // [ 'Avocado' ]
// Select fruit that does not end in 'o'
let fruitsStartsWithNotA = fruits.filter((fruit) = > /[^o]$/.test(fruit));
console.log(fruitsStartsWithNotA); // [ 'Apple', 'Watermelon', 'Orange', 'Strawberry' ]
const str = 'hello world\nhello my world';
console.log(str.match(/world$/g)); // [ 'world' ]
// In multi-line mode, $also matches the beginning of a newline
console.log(str.match(/world$/gm)); // [ 'world', 'world' ]
// Select fruit that starts with A and ends with O
console.log(fruits.filter((fruit) = > /^A\w*o$/.test(fruit))); // [ 'Avocado' ]
Copy the code\bMatches word boundaries
Matches the left and right boundaries of words, which are positions that are preceded or followed by no other character, such as between letters and Spaces.
/\bm/Matches “m” in “moon”/oo\b/“Oo” is not matched in “moon” because “oo” is followed by the word “n” character./oon\b/Match “oon” in “moon”, because “oon” is the end of the string, so there are no word characters after it/\w\b\w/Will never match anything because a word character is never followed by a non-word character and a word character
let fruitsWithDescription = ['Red apple'.'Orange orange'.'Green Avocado'];
// Select a description that contains words ending in "en" or "Ed" :
let enEdSelection = fruitsWithDescription.filter((descr) = > /(en|ed)\b/.test(descr));
console.log(enEdSelection); // [ 'Red apple', 'Green Avocado' ]
Copy the code\BMatch word non-boundary
Matches a non-word boundary, which is where the last character and the next character are of the same type (same type for letters and numbers, different type for letters and Spaces) : either both must be words, or both must be non-words, such as between two letters or between two Spaces.
let values = ['Red apple'.'ppOrange orangepp'.'Greenpp Avocado'];
// Select words with "pp" in the middle,
const result = values.filter((val) = > /\Bpp\B/.test(val));
console.log(result); // [ 'Red apple' ]
const str = 'hello1 word， llo 1231';
console.log(str.match(/llo/g)); // [ 'llo', 'llo' ]
console.log(str.match(/llo\B/g)); // [ 'llo' ]
Copy the codex(? =y)Prior to assert that
x(? =y) matches x followed by y with the value of x.
// Match First followed by "test"
let regex = /First(? = test)/g;
console.log('First test'.match(regex)); // [ 'First' ]
// First is not followed by test, so null is returned
console.log('test First peach'.match(regex)); // null
console.log('This is a First test in a year.'.match(regex)); // [ 'First' ]
console.log('This is a First peach in a month.'.match(regex)); // null
Copy the codex(? ! y)Forward negative assertion
x(? ! Y) matches x that is not followed by y, with the matching value x.
// Match First not followed by "test"
let regex = /First(? ! test)/g;
// First followed by "test", so null is returned
console.log('First test'.match(regex)); // null
// First is not followed by "test", so return First
console.log('test First peach'.match(regex)); // [ 'First' ]
console.log('This is a First test in a year.'.match(regex)); // null
console.log('This is a First peach in a month.'.match(regex)); //[ 'First' ]
Copy the code(? <=y)xAfter the assertion
(? <=y)x matches x preceded by y, resulting in x, where x and y represent characters or regular expressions.
let oranges = ['69 ripe orange z '.'green orange B'.'78 ripe orange A '];
// Pick '69 ripe orange A 'and '78 ripe orange A'
const result = oranges.filter((fruit) = > / (? <=ripe\s)orange/.test(fruit));
/ / /? <=ripe\s)orange/ Indicates a string followed by orange
console.log(result); // [ '69 ripe orange z ', '78 ripe orange A ' ]
{{name}}} {{name}}
const str = 'Name: {{name}}; Age: {{age}} ';
// You can use a combination of forward and backward assertions to match strings preceded by {{, followed by}}, and separated by characters
console.log(str.match(/ (? <={{)\w+(? =}})/g)); // [ 'name', 'age' ]
Copy the code(? <! y)xBackward negative assertion
(?
let oranges = ['69 ripe orange z '.'99 green orange B'.'78 ripe orange A '];
// find '99 green orange B'
const result = oranges.filter((fruit) = > / (?
.test(fruit));
/ / /?
// '99 green orange B' does not exist, so it is filtered
console.log(result); // [ '99 green orange B' ]
// Find letters that are not preceded by < and not followed by >
const str = '<d>hello<d>';
console.log(str.match(/ (?
)/g)); // [ 'hello' ]
Copy the codeNote: Safari does not support forward and backward assertions and will report an error.
JS uses re
Regex is used in JS mainly through the test and exec methods of RegExp, and the match, matchAll, replace, search, and split of String objects.
RegExp
RegExp.prototype.test()
The test method retrieves the entire string and returns true if there are substrings in the string that match the regular.
-
grammar
regexObj.test(str)
-
parameter
STR Is the string used to match the regular expression
-
The return value
Returns true if the regular expression matches the specified string; False otherwise.
console.log(/\d+/.test('￥1213')); // true
console.log(/^\d+/.test('￥1213')); // false
console.log(/^\d+/.test('1213 and')); // true
console.log(/^\d+$/.test('1213 and')); // false
console.log(/^\d+$/.test('1213')); // true
const str = 'hello world';
const reg = /hello/;
reg.test(str); //true
Copy the codeRegExp.prototype.exec()
Exec is used to perform a search match in an array, returning a match array or NULL. JavaScript RegExp objects are stateful when the global or sticky flag bits are set (e.g. /foo/g or /foo/y). They record the position since the last successful match in the lastIndex property. With this feature, exec() can be used to walk through the results of multiple matches (including captured matches) in a single string line by line.
-
grammar
regexObj.exec(str)
-
parameter
STR The string to match the regular expression.
-
The return value
If the match is successful, the exec() method returns an array containing the additional attributes index and input, as shown in the table below, and updates the lastIndex attribute of the regular expression object. The fully matched text is returned as the first item in the array, and from the second, each subsequent item corresponds to the successfully matched text in the regular expression capture brackets.
If the match fails, the exec() method returns null and resets lastIndex to 0.
// When searching the entire string using while, the /g global match must be used, otherwise it will get stuck in an infinite loop
const regex = /foo*/g;
const str = 'table football, foosball';
let result;
while((result = regex.exec(str)) ! = =null) {
console.log('Search results:${result[0]}; End of search index:${regex.lastIndex}. `);
}
// Search result: foo; End of search index: 9.
// Search result: foo; End of search index: 19.
var re = /quick\s(brown).+? (jumps)/i;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
console.log(result);
// [ 'Quick Brown Fox Jumps','Brown','Jumps',index: 4,input: 'The Quick Brown Fox Jumps Over The Lazy Dog',groups: undefined ]
Copy the codeString
String.prototype.match()
The match method retrieves the result of a string matching a regular expression.
-
grammar
str.match(regexp)
-
parameter
Regexp A regular expression object. If a non-regular expression object is passed in, it is implicitly converted to a RegExp using New RegExp(obj). If you give no arguments and use match() directly, you will get an Array: [“”] containing an empty string.
-
The return value
If the G flag is used, all results that match the full regular expression are returned, but the capture group is not returned. If the G flag is not used, only the first full match and its associated capture group (Array) are returned. In this case, the returned item will have the additional properties described below.
const str = 'https://www.baidu.com http://www.google.com';
console.log(str.match(/(https?) : \ \ / / /));
// [ 'https://','https',index: 0]
console.log(str.match(/(https?) :\/\//g));
//[ 'https://', 'http://' ]
Copy the codeString.prototype.matchAll()
The matchAll() method returns an iterator containing the results of all matching regular expressions and the grouped capture groups.
-
grammar
str.matchAll(regexp)
-
parameter
Regexp Regular expression object. If the passed parameter is not a regular expression object, it is implicitly converted to a RegExp using new RegExp(obj).
RegExp must be in the form of global mode G, otherwise TypeError will be raised.
-
The return value
An iterator (not reusable, the result is exhausted and the method needs to be called again to get a new iterator).
const regexp = /t(e)(st(\d?) )/g;
const str = 'test1test2';
const array = [...str.matchAll(regexp)];
console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]
console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]
Copy the codeString.prototype.replace
Replace () replaces a substring in a string, and returns a new string. The first argument can be a string or regular expression, and the second argument can be a string and a function.
-
grammar
str.replace(regexp|substr, newSubStr|function)
-
parameter
Regexp (Pattern) A regexp object or its literal. What the re matches is replaced by the return value of the second argument.
Substr (pattern) A string to be replaced by newSubStr. It is treated as an entire string, not as a regular expression. Only the first match is replaced.
NewSubStr (replacement) is used to replace a string that matches the first argument in the original string. Special variable names can be interpolated into the string. See using strings as arguments below.
Function (replacement) A function that creates a new substring and returns a value that replaces the result of the first argument. Refer to specifying a function as an argument below.
-
The return value
A string that partially or completely matches a new string replaced by an alternate pattern.
const mounth1 = 'Jan; Feb; Mar; Apr; May; Jun; Jul; Aug; Sep; Oct; Nov; Dec';
console.log(mounth1.replace('; '.', '));
// Jan,Feb; Mar; Apr; May; Jun; Jul; Aug; Sep; Oct; Nov; Dec
console.log(mounth1.replace('; '.(res) = > res + ', '));
// Jan; ,Feb; Mar; Apr; May; Jun; Jul; Aug; Sep; Oct; Nov; Dec
const month = 'Jan<Feb,Mar>Apr,May<Jun>Jul,Aug|Sep[Oct]Nov,Dec';
console.log(month.replace(/[<,>|[\]]/g.'; '));
// Jan; Feb; Mar; Apr; May; Jun; Jul; Aug; Sep; Oct; Nov; Dec
console.log(month.replace(/[<,>|[\]]/g.(res) = > ` {{${res}}} `));
// Jan{{<}}Feb{{,}}Mar{{>}}Apr{{,}}May{{<}}Jun{{>}}Jul{{,}}Aug{{|}}Sep{{[}}Oct{{]}}Nov{{,}}Dec
Copy the codeAdvanced usage
When replace takes a regular expression as its first argument and a string as its second argument, it also allows you to reference all or part of the matching content in the replacement string.
$$Replace it with a “$”$&Replace with a matching substring$‘replaces the content to the left of the currently matched substring$'Replace with the content to the right of the currently matched substring.$nIf the first argument is a RegExp object and n is a non-negative integer less than 100, insert the NTH parenthes-matching string. Tip: The index starts at 1. If no NTH grouping exists, the matches are replaced with literals. If there is no third grouping, the match is replaced with “$3”.$<Name>Here Name is a group Name. If there is no grouping (or match) in the regular expression, the variable is treated as an empty string. Only available in browsers that support named group capture.
var re = /(\w+)\s(\w+)/;
var str = 'John Smith';
var newstr = str.replace(re, 'the $2, $1');
// Smith, John
console.log(newstr);
Copy the codeString.prototype.search
The search() method performs a search match between the regular expression and the String. If the match is successful, search() returns the index of the first match in the String that the regular expression made. Otherwise, -1 is returned.
const str = 'hey JudE';
const re = /[A-Z]/g;
const re2 = /[.]/g;
console.log(str.search(re)); / / 4
console.log(str.search(re2)); // -1
Copy the codeString.prototype.split
The split() method splits a String into an array of substrings using the specified delimiter String, with a specified split String or regular expression determining the location of each split.
const month = 'Jan<Feb,Mar>Apr,May<Jun>Jul,Aug|Sep[Oct]Nov,Dec';
console.log(line.split(/\d+/)); // [ 'Oh', 'brave', 'new', 'world.' ]
console.log(month.split(/ [<, > | [\]] /));
// [ 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep', 'Oct','Nov','Dec' ]
Copy the codeconclusion
At this point, this article is over! This article is more of a study note, I have learned regularity many times, but forget many times, this time decided to write down the entire learning process, in order to master the utility of regularity. This article covers the various parts of regex as completely as possible, but there are some things that are not covered, and you can check them out at MDN if you need them.