怎么使用正则表达式

怎么使用正则表达式

正则表达式方法

• test方法。

var str = '1234567890';
var reg1 = /abc/;
var reg2 = /345/;
// test接收一个参数: 要验证的字符串，返回的结果是布尔类型：匹配成功（字符串和正则匹配上了）返回true，否则返回false
var res1 = reg1.test(str);	// false
var res2 = reg2.test(str);  // true

• exec方法

/** exec也只接收一个参数：要验证的字符串，返回结果：匹配成功，返回匹配组，否则返回null
 * 匹配组是一个数组，下标0表示匹配上的字符，1234...N代表第一个到第N个原子组匹配结果
 * 除此之外，匹配组还包含了三个属性：index(从输入字符串的第几个开始匹配上)，input（输入字符串），groups（改名的原子组） 
 * 如果设置了全局修饰符，每一次调用exec方法，都会返回一个匹配信息，直到没有匹配信息，返回null。
 * 如果没有设置全局修饰符，每次调用exec方法都返回第一个匹配信息（如果没有匹配信息，返回null）。
 * 
 */
var res3 = reg1.exec(str);	// null
var res4 = reg2.exec(str);	// ['345', index: 2, input: '1234567890', groups: undefined]
var reg3 = /(.)4(.)/;
var reg4 = /(.)4(.)/g;
var str2 = '1234567876543212345';
var res5 = reg3.exec(str2);
console.log(res5);  // ['345', '3', '5', index: 2, input: '1234567876543212345', groups: undefined]
console.log(reg3.lastIndex);  // 0
res5 = reg3.exec(str2);
console.log(res5);  // ['345', '3', '5', index: 2, input: '1234567876543212345', groups: undefined]
console.log(reg3.lastIndex);  // 0

var res6 = reg4.exec(str2);
console.log(res6);  // ['345', '3', '5', index: 2, input: '1234567876543212345', groups: undefined]
console.log(reg4.lastIndex);  // 5
res6 = reg4.exec(str2);
console.log(res6);  // ['543', '5', '3', index: 10, input: '1234567876543212345', groups: undefined]
console.log(reg4.lastIndex);  // 13
res6 = reg4.exec(str2);
console.log(res6);  // ['345', '3', '5', index: 16, input: '1234567876543212345', groups: undefined]
console.log(reg4.lastIndex);  // 19

RegExp构造函数的属性

全名	简写	说明
input	$_	输入的字符串（test、exec方法传入的参数字符串）
lastMatch	$&	最后匹配的字符串
lastParen	$+	最后匹配原子组
leftContext	$`	最后匹配的字符串左边的文本
rightContext	$'	最后匹配的字符串右边的文本

var reg3 = /(.)4(.)/g;
var str2 = '1234567876543212345';
var res5 = reg3.exec(str2);
console.log(RegExp.input);  // 1234567876543212345
console.log(RegExp['$_']);  // 1234567876543212345
console.log(RegExp.lastMatch);    // 345
console.log(RegExp['$&']);    // 345
console.log(RegExp.lastParen);    // 5
console.log(RegExp['$+']);    // 5
console.log(RegExp.leftContext);    // 12
console.log(RegExp['$`']);  // 12
console.log(RegExp.rightContext);   // 67876543212345
console.log(RegExp['$\'']);   // 67876543212345

除此之外RegExp构造函数的属性还有$1-$9，分别代表第一到第九个原子组的匹配结果。

字符串方法：match、matchAll、search、replace、split

• match方法: match方法返回的结果和正则表达式方法exec返回的结果一样。但是有一点需要注意的，添加全局修饰符后，match方法返回的结果只有匹配到的文本。

var str = '1234567876543212345';
var reg1 = /(.)4(.)/;
var res1 = str.match(reg1); // ['345', '3', '5', index: 2, input: '1234567876543212345', groups: undefined]
var reg2 = /(.)4(.)/g;
var res2 = str.match(reg2); // ['345', '543', '345']  添加全局修饰符，只有匹配结果，没有匹配信息

• matchAll方法: match方法不加全局修饰符只能返回第一个匹配到的结果信息，加了修饰符又只有匹配结果，没有匹配信息。那么，我想获取第二哥匹配结果的信息怎么办呢？这时候就得用matchAll方法了。值得注意的是，matchAll因为出道比较迟，需要比较高版本的浏览器才支持。

var str = '1234567876543212345';
var reg1 = /(.)4(.)/g;
var res1 = str.matchAll(reg1); 
for(let aa of res1) {
    console.log(aa)
}
// ['345', '3', '5', index: 2, input: '1234567876543212345', groups: undefined]
// ['543', '5', '3', index: 10, input: '1234567876543212345', groups: undefined]
// ['345', '3', '5', index: 16, input: '1234567876543212345', groups: undefined]

matchAll返回的结果是一个迭代器，可以用for..of循环取出结果。matchAll参数传入的正则表达式必须是带全局修饰符，不然会报错。

• search方法: search方法返回的结果是一个下标（如果在字符串中匹配到了，返回匹配上的文本的下标，否则返回-1）

var str = '1234567876543212345';
var reg1 = /(.)4(.)/;
var res1 = str.search(reg1);  // 2  search方法只会返回第一个匹配到的文本下标，即使是添加了全局修饰符也没用

• replace方法：replace方法是一个非常常用的字符串方法，它需要传入两个参数，一个是字符串中需要被替换的文本，一个是需要替换的文本（也可以传一个函数）。replace方法的返回值是替换后的字符串。

var str = '1234567876543212345';
var reg1 = /(.)4(.)/g;
var res1 = str.replace(reg1, '*');   
console.log('str: ', str, ' , res1: ', res1); // str:  1234567876543212345  , res1:  12*67876*212*

replace方法并不会改变字符串本身，只会把替换后的结果返回。

• split方法: 正则表达式在split方法中，是用来匹配分隔符的。在字符串分割的时候，遇到不确定的分隔符时，使用正则表达式特别方便，比如下面的例子：

var date1 = '2022-10-13';
var date2 = '2022/10/15';
var res1 = date1.split(/[-/]/); // ['2022', '10', '13']
var res2 = date2.split(/[-/]/); // ['2022', '10', '15']