来了解下字符串的replace方法

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

前言

昨天写了一篇利用正则实现千分位分隔的文章（链接在这里），然后里面用到了replace方法，我自认为我对replace是了解的，但是用了才发现，我只是懂了它的皮毛，于是，借着这次机会，重新学习下replace方法。

语法

replace，顾名思义，是一个字符串的替换方法。该替换不影响原来的字符串。

str.replace(searchStr, newStr)

• searchStr

  需要匹配的字符串，类型可以是字符串,也可以是正则表达式。

• newStr

  需要匹配的字符串，类型可以是字符串，也可以是函数，在函数里面进行替换。

  • 如果newStr是字符串，支持在字符串中插入特殊变量名，支持以下变量名：

    变量名	描述
    $$	插入$
    $&	插入匹配的子串
    $`	插入匹配的左侧的内容
    $'	插入匹配的右侧的内容
    $n	针对searchStr是正则表达式，n代表着正则表达式里的括号，n从1开始，1代表正则表达式第一个括号匹配到的内容，依此类推，n最大不超过100。如果正则表达式不存在第n个括号，则把$n当作普通字符串。

    下面用例子说明下：

     '答案cp3'.replace('cp3', '$$')   // "答案$" 插入$代替cp3
    
     '答案cp3'.replace('cp3', '$&')   // "答案cp3" 插入匹配的子串，所以结果是没变的
    
     '答案cp3'.replace('cp3', '$`')  // "答案答案"  插入匹配的左侧内容
    
     '答案cp3'.replace('答案', "$'")  // "cp3cp3" 插入匹配的左侧右侧
    
     '答案cp3'.replace(/(cp3)/, "$1")  // "答案cp3" ，因为$1代表正则表达式第一个括号，它匹配到的是`cp3`,所以$1对应的就是`cp3`
    
     '答案cp3'.replace(/cp3/, "$1")  // "答案$1", 因为正则里没有括号，把$1当作普通字符串
    
    

  • 如果newStr是函数，匹配后则会执行该函数。如果searchStr是正则表达式，而且是全局匹 配，则该函数会执行多次，直到匹配到结尾。

    该函数有以下参数(依顺序排列)：

    • match

      匹配到的子串

    • $1,$2,...$n

      对应上面的$n, 如果searchStr是正则表达式，n代表的就是正则表达式的第n个括号，n从1开始，代表着正则表达式的第n个括号匹配到的内容

    • index

      匹配到的子串(也就是第一个参数match)的第一个字符在原来字符串的下标

    • str

      输入的原字符

      还是以上面的例子来举例说明

      // 这个例子的正则有1个括号，对应的是$1
      '答案cp3'.replace(/(cp3)/, (match, $1, index, str) => {
         console.log(match, $1, index, str) // cp3 cp3 2 答案cp3
         return 'cp3'
      }) // 返回答案cp3
      
      // 这个例子的正则有2个括号，对应的是$1,$2
      '答案cp3'.replace(/(答案)(cp3)/, (match, $1, $2, index, str) => {
         console.log(match, $1, $2, index, str) // 答案cp3 答案 cp3 0 答案cp3
         return '答案cp3'
      }) // 返回答案cp3
      
      // 这个例子的正则使用了全局匹配，函数会执行多次
      '答案cp3答案cp3'.replace(/(答案)(cp3)/g, (match, $1, $2, index, str) => {
         console.log(match, $1, $2, index, str) 
         // 第一次打印： 答案cp3 答案 cp3 0 答案cp3答案cp3
         // 第二次打印： 答案cp3 答案 cp3 5 答案cp3答案cp3
         return '答案cp3'
      }) // 返回答案cp3
      

总结

以上就是自己总结的replace的用法，自己也学习了一遍，希望对你们有帮助。