关于 JS String replace 函数的笔记

这个应该是处理字符串最厉害的函数了。为什么说它厉害，是因为他支持的参数决定的。

非常灵活，组合起来，能满足各种复杂的场景！

参数：

str.replace(regexp|substr, newSubStr|function)

可以看到，replace 方法主要支持两个参数，每个参数支持两种类型。因为每种参数搭配都是不同的应用场景。所以按照排列组合的方式穷举出所有组合（也就四种）。

1. str.replace(substr, newSubStr) 类型

   字符串 组合 字符串。

   这个是最简单的模式了。把 匹配 的字符串替换成 指定 的字符串。

   注意：这种模式下，如果有多个匹配，仅有第一个匹配项会被替换。

   例子：

   const str = 'abcDeDDfg'
   str.replace('D', 'd') // 'abcdeDDfg'
   

   特别注意：替换字符串 newSubStr 可以插入下面的特殊变量名：

   变量名	代表的值
   $$	插入一个 “$”。
   $&	插入匹配的子串。就是你匹配到的内容
   $`	插入当前匹配的子串左边的内容。
   $'	插入当前匹配的子串右边的内容。
   $n	假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。 提示：索引是从1开始

   const str = 'abcDeDDfg'
   
   str.replace('DD', "-$$-") // abcDe-$-fg
   str.replace('DD', "-$&-") // abcDe-DD-fg
   str.replace('DD', "-$`-") // abcDe-abcDe-fg
   str.replace('DD', "-$'-") // abcDe-fg-fg
   
   // 如果第一个参数不是正则的分组；或者是正则，但是没有匹配到分组，会被当作字符串处理
   str.replace('DD', '-$1-') // abcDe-$1-fg
   str.replace(/DD/, '-$1-') // abcDe-$1-fg
   str.replace(/(DD)/, '-$1-') // abcDe-DD-fg
   

2. str.replace(substr, function) 类型

   字符串 组合 替换函数。

   这个组合其实不是很强，很弱鸡，没有体现出两个参数的强大。但是带了一个好处就是，替换函数的参数是固定下来的。

   const str = 'abcDeDDfg'
   str.replace('DD', function (match, offset, string, d, e, f) {
     console.log([match, offset, string, d, e, f]) // ["DD", 5, "abcDeDDfg", undefined, undefined, undefined]
     return '-'
   }) // abcDe-fg
   

   解析：可以看到，后面的参数是没有值的，前面的参数依次表示的意思是：

   • match：匹配到的字符串；
   • offset：匹配字符串的下标；
   • string：原始字符串；
   • … 再后面的参数就没有值了

   其实替换函数的参数是不固定的，需要结合第一个参数，看它传的是字符串还是正则，如果是正则，有没有有分组，每一种情况都会导致替换函数的参数发生变化。更强大的组合，看第四组！

   3. str.replace(regexp, newSubStr) 类型

      正则表达式 和 字符串。

      这个组合是第一个组合的超集，在原有的基础上，增加了 正则组的匹配。

      例子：

      const str = 'abcDeDDfg'
      str.replace(/DD/, '-$1-') // abcDe-$1-fg // 如果没有匹配到 分组，$n 会被当作字符串处理
      str.replace(/(DD)/, '-$1-') // abcDe-DD-fg
      str.replace(/\w+(bc)\w+(DD)/, '-s1=$1-s2=$2-') // -s1=bc-s2=DD-fg
      

      有意思的场景：格式替换

      const time = '10-29-2020'
      
      // 需求：把时间格式化成：年-月-日 的样子
      time.replace(/(\d{2})-(\d{2})-(\d{4})/, '$3-$1-$2') // 2020-10-29
      

      这个组合在交换位置方面特别有用！

   4. str.replace(regexp, function) 类型

      正则表达式 和 替换函数类型

      这个怕是这个函数最复杂的类型了。因为 替换函数的参数是根据第一个参数，也就是正则表达式来确定的。这个是更全的参数。

      变量名	代表的值
      match	匹配的子串。（对应于上述的$&。）
      p1,p2, ...	假如replace()方法的第一个参数是一个RegExp 对象，则代表第n个括号匹配的字符串。（对应于上述的$1，$2等。）例如，如果是用 /(\a+)(\b+)/ 这个来匹配，p1 就是匹配的 \a+，p2 就是匹配的 \b+。
      offset	匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 'abcd'，匹配到的子字符串是 'bc'，那么这个参数将会是 1）
      string	被匹配的原字符串。
      NamedCaptureGroup	命名捕获组匹配的对象

      const str = 'abcDeDDfg'
      str.replace(/\w+(bc)\w+(DD)/, function (match, p1, p2, ...) {
        // 发挥你的想象力，做你想做的事情
      })
      

好了看到这里，我只是一个复读机，更准确的消息，看官方的说法：

String.prototype.replace() - MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace