关于 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:原始字符串;
    • … 再后面的参数就没有值了

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

    1. 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
      

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

    2. 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

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页