正则捕获与replace方法

replace的两种用法

replace 字符串中实现替换的方法（一般都是伴随正则一起使用的），replace是把原有的字符替换成新的字符

replace配合传统字符串的用法

replace把’axihe’改为’阿西河'

let str = "axihe2020an06bang30axihe";
str = str.replace('axihe', '阿西河');
console.log(str);//阿西河2020an06bang30axihe

发现只能替换一次，如果多次替换，只能再次执行

let str = "axihe2020an06bang30axihe";
str = str.replace('axihe', '阿西河');
str = str.replace('axihe', '阿西河');
console.log(str);//阿西河2020an06bang30阿西河

在不使用正则的情况下，每当执行一次只能替换一个字符

replace配合正则

第一个参数是一个正则：把正则所匹配的内容都替换掉

let str = "axihe2020an06bang30axihe";
let reg = /axihe/g;
str = str.replace(reg, '阿西河');
console.log(str);//阿西河2020an06bang30阿西河

replace两种用法区别

传统字符串的方式

let str = "axihe2020an06bang30axihe";
str = str.replace('axihe', 'axihe.com');
str = str.replace('axihe', 'axihe.com');
console.log(str);

我们会发现，结果是axihe.com.com2020an06bang30axihe 而不是axihe.com2020an06bang30axihe.com

传统字符串的方式缺点：每次替换都是从字符串第一个位置开始做好的，类似于正则捕获的懒惰性

正则的方式

 let str = "axihe2020an06bang30axihe";
let reg = /axihe/g;
str = str.replace(reg, 'axihe.com');
console.log(str);//axihe.com2020an06bang30axihe.com

我们会发现，结果是是axihe.com2020an06bang30axihe.com，完全正确

总结：replace配合正则更给力

replace正则的两种用法

• 1、replace 第一项的值是一个正则它的实现原理

var str = "zhu2015zhu2016zhu2017zhu2018";
str = str.replace(/zhu/g, "[OK]");//
console.log(str);//[OK]2015[OK]2016[OK]2017[OK]2018

首先我们和 exec 捕获一样，把所有和我们正则匹配的都捕获到，然后把捕获的内容替换成我们需要替换的新内容

//-> /zhu/g 按照这个正则把 str 中所有可以匹配的都捕获到，然后统一都替换成"newStr"
var str = "zhu2015zhu2016";
var reg = /zhu/g;
console.log(reg.exec(str));//->["zhu", index: 0, input: "zhu2015zhu2016"]
console.log(reg.exec(str));//->["zhu", index: ？, input: "？"]
str = str.replace(/zhu/g, function () {
    //console.log(arguments);
    // 第一次执行匿名函数的结果 ->["zhu", 0, "zhu2015zhu2016"]
    // 第二次执行匿名函数的结果 ->["zhu", ？, "？"]
    return "newStr";
});
console.log(str);

• 2、第二个参数换成一个函数
  • 1)、匿名函数执行多少次，取决于正则能在字符串中捕获多少次 ->正则捕获两次，所以我们的匿名函数也执行两次
  • 2)、每一次执行匿名函数，里面传递的参数值 arguments 和我们自己通过 exec 捕获到的结果是非常的类似的（即使正则有分组，我们同样可以通过 arguments 获取到分组捕获的内容）
  • 3)return: 你返回的结果是啥，就相当于把当前这一次大正则捕获的内容替换成你返回的内容

var str = "zhu2015zhu2016";
str = str.replace(/\d+/g, function () {
    console.log(arguments[0]);// 每一次执行匿名函数把我们大正则捕获的内容获取到
    return 1;// 我返回的 1 把每一次大正则匹配捕获的内容都替换了
});
console.log(str);//->"zhu1zhu1"

	例子：

var str = "zhu2015zhu2016";
var reg = /(\d+)/g;
str = str.replace(reg, function () {
    console.log(arguments,RegExp.$1);// 获取每一次执行匿名函数我们正则捕获到的第一个分组中的内容
    return "----"
});
console.log(str);
console.log(RegExp.$1);//2016 获取第一个分组捕获的内容

小练习

时间格式化

把2020-06-30改为2020年06月30日；

第一种方法：str.replace(reg, fun)

let time = "2020-06-30";
let reg = /^(\d+)-(\d+)-(\d+)$/g;//因为贪婪性会自动匹配到最多
let result = time.replace(reg, (...arg) => {
    console.log(arg);//这里是匹配的结果
    return `${arg[1]}年${arg[2]}月${arg[3]}日`
})
console.log(result);

总结如下

• 首先拿reg和time进行匹配，能匹配到几次就会把传递的函数执行几次
  • 匹配一次就执行一次
• 不仅把方法执行，而且replace还给方法传递啦实参信息（和 exec 捕获的内容一致的信息）

第二种方法

直接使用$1``$2``$3

let time = "2020-06-30";
let reg = /^(\d+)-(\d+)-(\d+)$/g;
console.log(time.replace(reg, "$1年$2月$3日"));

结果就是正确的啦

单词首字母大写

把 'axihe cool cool cool!' 改为 'Axihe Cool Cool Cool!'

let str = 'axihe cool cool cool!'
let reg = /\b([a-zA-Z])[a-zA-Z]*\b/g;
let result = str.replace(reg, (...arg) => {
    // console.log(arg);//这里是匹配的结果
    let [fullContent, $1] = arg;
    console.log(fullContent);//axihe
    console.log($1);//a
    // return arg.slice(0, 1).toUpperCase() + arg.slice(1).toLowerCase();
    return `${$1.toUpperCase()+fullContent.slice(1)}`
})
console.log(result);

小结：replace是重点功能