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 asreg.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 asreg.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
    1 . 1,
    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 asstr.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 asstr.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 asstr.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.

  • 1335555666617788884444The first thing to be matched is 5555, and the string is replaced by133 * * * * 666617788884444At 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 rest8884444The 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})+$)/gThere 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…