码字,杂谈

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) {}

参数可以简单理解为:

参数 含义
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

参数字符串

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

参数 含义
$$ 插入一个 $
$& 插入匹配的子串
$` 插入当前匹配的子串左边的内容
$’ 插入当前匹配的子串右边的内容
$n 获取第n个获取到的子串,同上面的 p1,p2,…,pn

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

// 错误,得到结果为 ~
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 是会被当成参数的,内部实现会将其直接替换。

你学会了么?

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注