阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      正则捕获与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);
      

      总结如下

      • 首先拿regtime进行匹配,能匹配到几次就会把传递的函数执行几次
        • 匹配一次就执行一次
      • 不仅把方法执行,而且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是重点功能

      目录
      目录