JS 中字符串 replace 的高级用法

缘起

说来惭愧，一直用 replace 替换，却一直没注意第二个参数可以放函数，也一直没用到。今天在做 excel 下载时发现一直报表名的错误，发现名字超长了，也才发现原来 excel 表名最长好像到31个字符。

想着简单，把中间截取一下替换成 ~ 就可以了。然后发现 replace 不能一次性满足我，虽然用两次可以解决，但是不能忍，于是去 文档 恶补了一下。

基本用法

基本用法我们天天用，没啥说的：

var s = 'abcde';
s = s.replace(/bc/, '~');
console.log(s); // 'a~de'

高级用法

函数作为参数

高级用法就是第二个参数可以传入一个函数：

function(match, p1, p2, ..., pn, offset, str) {}

参数可以简单理解为:

函数需要返回一个新的字符串值，该值就是我们需要接收的值。

对应我的需求，现在有一个超长的名字，比如它是：abcdefghijklmnopqrstuvwxyz1234567890，现在需要将其缩短，策略是前20个字符保留，后5个字符保留，中间所有字符替换为 ~，就可以使用上面函数：

var name = "abcdefghijklmnopqrstuvwxyz1234567890";
name = name.replace(/^.{20}(.*).{5}$/g, function(match, p1, offset, str) {
    return match.replace(p1, "~");
})

就会得到需要的 abcdefghijklmnopqrst~67890。

参数字符串

使用参数字符串，需要通过关键字符 $ 来获取，平时使用时如果用到过 $ 作为替换字符的话会有注意：

它可以获取对应的内容，但是不要直接对参数字符串进行修改：

// 错误，得到结果为 ~
name = name.replace(/^.{20}(.*).{5}$/g, "$1".replace(/.*/, "~"));

上面这种写法是不会得到正确结果的，因为 "$1".replace(/.*/, "~") 会先被解析成字符串字面量，与 $& 效果相同，不会再将 $1 当做一个参数。所以这样得到的结果是且仅仅是一个 ~。

得到 ~ 的步骤是：

• 将 $1 替换为了 ~，所以是将 ~ 作为了替换内容
• 正则匹配了全局内容，所以全局内容被替换为了 ~
• replace 返回的结果是 ~，name 被重新赋值为 ~

所以，这种方式不能在参数字符串中直接修改内容。

那么为了得到正确结果，有没有可行的方式呢？

答案是肯定的，对应上面使用函数的例子，可以使用参数字符串进行替换：

// 正确
name = name.replace(/^(.{20})(.*)(.{5})$/g, "$1~$3");

此时替换内容 "$1~$3" 中的 $1 和 $3 是会被当成参数的，内部实现会将其直接替换。

你学会了么？