The meaning of the relevant symbols
Images to summarize
Composition of a regular expression
let reg = /pattern/flags;
Copy the code
Pattern is the body of the regular expression. Flags, used to control the behavior of regular expressions. Flags has the following values
- G: Global mode, which looks for the entire content of the string instead of ending with the first match.
- I: Case insensitive, which means that the case of pattern and string is ignored when searching for matches.
- M: Multi-line mode, which indicates that the search will continue until the end of a line of text.
- Y: adhesion mode, which only searches for strings starting from and after 1astIndex.
- U: Unicode mode, enabling Unicode matching.
- S: indicates the metacharacter in dotA11 mode. Matches any character (including \n or \r).
As you can see, metacharacters in the previous diagram.
Matching any character other than a newline is inaccurate. If you add the S flag, you can match any character
metacharacters
Metacharacters, a total of 14 at the time of use need to add to escape {} \ [] () ^ $\ |? * +.
Brackets []
[-]
Symbol – or. Note here, in[]
The dot sign in represents this symbol, but if it’s outside, it means that it matches all. So if you’re not there[]
To match the ‘.’, use the transfer symbol.- in
[]
In, special characters do not need to escape, can be used directly, such as[. ()]
, but outside, it is necessary to escape (. Etc []
In ^ marks not,[]
The outer ^ identifier begins with the identifier[abc]
It means a or B or just, but/abc/
Represents consecutive ABC characters- The way in which or is represented in groups
(a|b)
A or b corresponds to[ab]
[]
The characters to be escaped are^ - []
Other metacharacters can be used without escaping
About \ b
See regular expression \b
- \b matches the position that its preceding and following characters are not all (one is, one is not or does not exist) \w.
- To put it another way: the preceding and following “explicit position” characters are not all \w.
RegExp and String related re operations
test
- A method of determining whether a string conforms to the constraints of a regular expression
- Usage such as
reg.test(str)
The return value can only be false or true
exec
- A method of finding the fragment of a string that matches that re
- Usage such as
reg.exec(str)
Returns an array of lengths greater than or equal to 1. The first item is the matched fragment, followed by the second, if there are groups () in the re
2,… Group the matched content
const str = '1234';
const reg1 = /\d{1}(\d{1})/g;// With g to match all fragments in the string
console.log(reg1.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
console.log(reg1.exec(str));//["34", "4", index: 2, input: "1234", groups: undefined]
console.log(reg1.exec(str));//null
const reg2 = /\d{1}(\d{1})/;// Without g, the first fragment is matched, and the match is not continued
console.log(reg2.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
console.log(reg2.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
Copy the code
Note that exec has different characteristics with and without the g identifier
match
- A method that belongs to a string and finds the segment of the string that matches the re, similar to exec
- Usage such as
str.match(reg)
Returns an array, with the distinction of g
const str = '1234';
const reg1 = /\d{1}(\d{1})/g;
const reg2 = /\d{1}(\d{1})/;
console.log(str.match(reg1));/ / / "12", "34"
console.log(str.match(reg2));//["12", "2", index: 0, input: "1234", groups: undefined]
Copy the code
replace
- A method of a string that replaces a fragment of a string that is matched by a re
- Usage such as
str.repalce(reg, param)
Returns a new string. Param The second argument can be a string, or a function that returns the replacement.
split
- A string method that splits a string into an array based on a regular expression match
- Usage such as
str.split(param)
Returns an array. Param The second argument can be a string or a regular expression.
Match details about replace
const str = '1335555666617788884444';
const reg1 = / (? <=\d{3})\d{4}(? =\d{4})/g;
const reg2 = / (? <=\d{3})\d{4}(? =\d{4})/;
console.log(str.match(reg1));/ / "(" 5555", "6666", "1778"]"
console.log(str.replace(reg1,'* * * *'));/ / "133 * * * * * * * * * * * * 8884444"
console.log(str.replace(reg2,'* * * *'));/ / "133 * * * * 666617788884444"
Copy the code
Replace Corresponds to what str.match(reg) matches. And str.match(reg) and reg.exec(STR) have similar effects.
You can see the matching process in the following example
const str = '1335555666617788884444';
const reg1 = / (? <=\d{3})\d{4}(? =\d{4})/g;
let match;
console.log(reg1.lastIndex);/ / 0
while(match ! = =null){
match = reg1.exec(str);
// Each time an exec is executed, reg1's lastIndex responds to the increment,
// The increment is equal to the position of the matched character + the length of the matched character
console.log(match);// Prints a match for each exec
console.log(match && match.index, reg1.lastIndex);
//macth is the index of the match in the target string STR
//reg1.lastIndex indicates that the next match will start at this index value
}
Copy the code
The print result is as follows
The conclusion can be drawn from this.
1335555666617788884444
The first thing to be matched is 5555, and the string is replaced by133 * * * * 666617788884444
At this point, reg’s lastIndex value is 7 instead of 0, and the next match will continue from the index value of 7.- If the match is 6666, replace it with **** and reg’s lastIndex value changes to 11. When 1778 is matched, the lastIndex of the reg changes to 15; The rest
8884444
The lastIndex of reg changes to 0 after the match is complete
About greed and inertia
The string 1234 is used with /\d{1,3}/g and /\d{1,3}? If you match PI over g, you get a different result
const str = '1234';
const reg1 = / \ d {1, 3} / g;
const reg2 = / \ d {1, 3}? /g;
console.log(str.match(reg1));/ / / "123", "4"]
console.log(str.match(reg2));/ / / "1", "2", "3", "4"]
Copy the code
No inert sign? \d{1,3} \d{1,3} \d{1,3} \d{1,3} \d{1,3} It’s lazy matching, so it’s going to be the least, so it’s going to be one.
For example, if we want to match the href link in a tag, we use lazy tags. Okay? You may find it useful
const str = '< a href = "https://www.baidu.com" id = "CSCS" title = "a link" > test word < / a >';
const reg1 = /".+"/g;
const reg2 = / ". +?" /g;
console.log(str.match(reg1));// Only one item was matched
/ / [" \ "https://www.baidu.com\" id = \ "CSCS \" title = \ \ ""] a link
console.log(str.match(reg2));// Three entries are matched
/ / [" \ "https://www.baidu.com\" ", "\" CSCS \ ""," \ \ ""] a link"
Copy the code
Several representative canonical writing methods
Amount category number, division
Change an amount of 11222333444 into the form of 11,222,333,444;
const str = '111333222';
const reg1 = / ((\ d {1, 3})? =(\d{3})+$)/g;
const reg2 = /(\d)(? =(\d{3})+$)/g;
const reg3 = / (? <=\d)(? =(\d{3})+$)/g;
const str2 = str.replace(reg1, '$1');
const str3 = str.replace(reg3, ', ');
const str4 = str.replace(reg2, '$1');
const str5 = str.replace(reg1, function(match){
return match+', ';
});
console.log(str.match(reg1));/ / / "11", "222", "333"]
console.log(str.match(reg2));/ / / "1", "2", "3"]
console.log(str.match(reg3));/ / / ""," ", ""
console.log(str2);/ / 11222333444
console.log(str3);/ / 11222333444
console.log(str4);/ / 11222333444
console.log(str5);/ / 11222333444
Copy the code
- Note that the two types of RegExp match different content. As you can see from reg3, the re can directly match the whitespace between strings
- Reg3 if it is
/ (? =(\d{3})+$)/g
There will be defects because
'111222333'.replace(/ (? =(\d{3})+$)/g.', ');//,111,222,333
Copy the code
So you need to limit the characters in front of it
- In addition, number has a toLocaleString method, which can do this conversion directly
Underline the hump name
const str = 'get_my_color';
const str2 = str.replace(/_([a-z])/g.(item, $1) = > $1.toUpperCase());
console.log(str2);
Copy the code
The phone number hides the middle four digits
const str = '13311112222';
const str2 = str.replace(/(\d{3})(\d{4})(\d{4})/.'$1 $3 * * * *');
const str3 = str.replace(/(\d{3})(? :\d{4})(\d{4})/.'$1 $2 * * * *');
const str4 = str.replace(/ (? <=\d{3})\d{4}(? =\d{4})/.'* * * *');
console.log(str2);* * * * 2222 / / 133
console.log(str3);* * * * 2222 / / 133
console.log(str4);* * * * 2222 / / 133
Copy the code
Str2 and STR4 match different content
Determine the character that occurs the most times in a string and count the number of occurrences
Here is an example of grouping in action
const str = 'aaabbbcccaaabbbaaa';
const str2 = str.split(' ').sort().join(' '); //"aaaaaaaaabbbbbbccc"
const arr = str2.match(/(\w)\1+/g);// The application of \1
arr.sort(function(a,b) {
return b.length - a.length;
});// Sort them from largest to smallest
console.log(arr);//["aaaaaaaaa", "bbbbbb", "ccc"]
console.log(arr[0]);//aaaaaaaaa
Copy the code
Inserts the specified character into a blank string
Convert qwer to qwer*
const str = 'qwer';
const reg1 = new RegExp(' '.'g');
const reg2 = / (? :)/g;
console.log(str.replace(reg1, The '*'));//*q*w*e*r*
console.log(str.replace(reg2, The '*'));//*q*w*e*r*
Copy the code
It is not valid to write //g directly to match null characters
Find the file suffix in the link
const str = 'https://pic2.zhimg.com/v2-5f03165aa5dff60d75c0f49f0ddd3db3_is.jpg?hhyr';
const reg1 = /(\.[A-z0-9]+$)|(\.[A-z0-9]+(? = \? \w+$))/;
const reg2 = /\.([A-z0-9]+)(\? \w*)? $/;
console.log(str.match(reg1)[0]);//.jpg
console.log(str.match(reg2)[1]);//jpg
Copy the code
13 to extract Object. The prototype. ToString. The type of call
let a = new WeakMap(a);function getType(o) {
let str = Object.prototype.toString.call(o);
let reg = /\b\w+(? = \] $) /;
return str.match(reg)[0];
}
console.log(getType(a));//WeakMap
Copy the code
Regular collation is commonly used
/ [1-9]\d*/; // positive integer /- [1-9]\d*/; // negative integer /(-? [1-9]\d*)|0/; Integers (positive integers, negative integers and0) /[\u4e00-\u9fa5]/; Chinese charactersCopy the code
Others to be sorted out
Re online test tool rookie tool
Check out the tutorial notes for probably the best regular expressions ever…