修身养性,知行合一

  • 首页
  • 爱码
    • 系统
    • 数据库
    • JavaScript
    • CSharp
    • Python
  • 生活
    • 文化
    • 美食
  • 杂谈
  • 关于
修身养性,知行合一
码字,杂谈
  1. 首页
  2. 爱码
  3. 前端
  4. JavaScript
  5. 正文

JS 中字符串 replace 的高级用法

2021年4月2日 2237点热度 1人点赞 1条评论

缘起

说来惭愧,一直用 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 是会被当成参数的,内部实现会将其直接替换。

你学会了么?

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: JavaScript
最后更新:2021年5月17日

jeremyjone

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

文章目录
  • 缘起
  • 基本用法
  • 高级用法
    • 函数作为参数
    • 参数字符串
最新 热点 随机
最新 热点 随机
关于 *.vue 文件中使用 TypeScript 声明类型报错的解决方案 element table 加载时宽度闪烁问题 windows 无法登录便签、OneNote等应用 vue2 中 vuex 对 ts 的支持 封装一个极简的右键菜单 vue2 使用 @vue/composition-api 的一些问题
关于 *.vue 文件中使用 TypeScript 声明类型报错的解决方案 美化 Windows Terminal(升级版) 真丶深入理解JavaScript异步编程(最终章):手撸 Promise js的装饰符 @ GIT删除指定的某次版本提交 拒绝弹窗!获取windows最高权限

(っ•̀ω•́)っ✎⁾⁾ 开心每一天

COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

京ICP备19012859号-1

京公网安备 11010802028585号