题图来自:https://wallhaven.cc/w/md353k

经常听大家说JavaScript是魔法语言,咱却没有什么深刻体会。直到这回踩到这个坑,我终于醒悟了,JavaScript果然来自霍格沃茨!

0x00 踩到坑

昨天咱经过一番考虑后决定将 Python正则表达式细节小记 这篇笔记发到个人博客上。选好文章音乐,复制markdown内容...发布!

按照惯例我检查了一下发布后的文章内容,然后就见到了一个奇怪的现象:

文章内容到一半的时候全被替换成 模板里的HTML 了...

之前调试博客的时候从没遇到过这个问题,我一时就有点摸不着头脑( >﹏<。),但没关系,比对一下原文档就应该知道问题在哪了:

很明显能发现是从$开始被替换了,我心里咯噔一下:怕不是和正则表达式有关!不过在排查正则表达式之前我去改了一下博客后台部分的代码:

结果问题仍然存在,我接着还拿着这样的内容片段进行复现,但没能成功($并没有被替换成其他内容):

test$

 $
test$

0x01 坑在哪

到最后,我还是怀疑回了正则表达式,但想来想去还是摸不着头脑,正则表达式和用作替换的字符串有什么关系,$不是用在正则表达式里的吗?而且为什么刻意用$去复现又不行呢?

实在不行只能去求助一下某搜索引擎了:

不查不知道,一查吓一跳,看到有老哥提到了replace函数接收的字符串不仅仅是字符串,我赶紧去MDN查了一下:

原来用作替换的字符串内能包括一些特殊的变量名!

变量名 代表的值
$$ 插入一个 "$"。
$& 插入匹配的子串。
$` 插入当前匹配的子串左边的内容。
$' 插入当前匹配的子串右边的内容。
$n 假如第一个参数是 RegExp对象,并且 n 是个小于100的非负整数,那么插入第 n 个括号匹配的字符串。提示:索引是从1开始。如果不存在第 n个分组,那么将会把匹配到到内容替换为字面量。比如不存在第3个分组,就会用“$3”替换匹配到的内容。
$ 这里Name 是一个分组名称。如果在正则表达式中并不存在分组(或者没有匹配),这个变量将被处理为空字符串。只有在支持命名分组捕获的浏览器中才能使用。

表格原地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace#使用字符串作为参数

现在再回去看文章markdown内容,有一部分我是这样写的:

到了这里,我发现老师说的在```[]```中**被当作普通字符**的元字符只是一部分罢了,主要是 ```*```,```?```,```+```,```{}```,```()```,```$``` 这些元字符。

毫无疑问其中的$\`就被替换为了匹配字串左边的内容,也就是模板的前面一部分,才导致文章被处理成这样。

可以说真的非常魔法了,万万没想到JavaScript竟然在待替换字符串这里内置了一些$变量名的用法。要是我没有想着把这篇小记发到个人博客上,说不定还得要好一阵子才能发现这个问题。

0x02 解决方法

解决方法其实很简单,str.replace(regexp|substr, newSubStr|function)的第二个参数是可以接受一个函数的,而这个函数的 返回值 就被直接用作匹配项替换了,而不是先寻找一遍$变量名。

比如我原来是这样写的:

str.replace(new RegExp('\\{\\[' + from + '\\]\\}','gi'), to);

那么我用箭头函数改写一下就行了:

str.replace(new RegExp('\\{\\[' + from + '\\]\\}','gi'), ()=>to);

其实就相当于:

str.replace(new RegExp('\\{\\[' + from + '\\]\\}','gi'), function(){
return to;
});

关于这个函数传入的参数可以看MDN文档这里的 指定一个函数作为参数

0x03 教训

以后写JavaScript代码的时候还是不能掉以轻心了,说不定在哪个角落还有我不太清楚的魔法。遇到不会或者不清楚的一定要多查文档,不然一旦写进项目里可能就会成为一个遗留的潜在问题。(ノへ ̄、)

JavaScript正则表达式replace的一个坑的更多相关文章

  1. 关于Javascript splice方法的一个坑。

    w3c相关文档:http://www.w3school.com.cn/jsref/jsref_splice.asp bug:购物车计算价格的时候.加商品没问题,减商品的时候价格总是计算错误. 经排查发 ...

  2. JavaScript的replace方法与正则表达式结合应用讲解

    大家好!!今晚在华软G43*宿舍没什么事做,把javascript中replace方法讲解一下,如果讲得不对或不合理是情理之中的事,因为我不是老鸟,也不是菜鸟,我也不知道我当底是什么鸟??呵~~ re ...

  3. JavaScript 正则表达式——定义,目的,特点,语法,字符串方法,search() ,replace() ,test(),exec()

    ㈠什么是正则表达式? ⑴正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.    正则表达式通常被用来检 ...

  4. JavaScript中sort方法的一个坑(leetcode 179. Largest Number)

    在做 Largest Number 这道题之前,我对 sort 方法的用法是非常自信的.我很清楚不传比较因子的排序会根据元素字典序(字符串的UNICODE码位点)来排,如果要根据大小排序,需要传入一个 ...

  5. javascript正则表达式入门先了解这些

    前言 此内容由学习<JavaScript正则表达式迷你书(1.1版)>整理而来(于2020年3月30日看完).此外还参考了MDN上关于Regex和String的相关内容,还有ECMAScr ...

  6. 【JS】javascript 正则表达式 大全 总结

    javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...

  7. 理清JavaScript正则表达式--下篇

    紧接:"理清JavaScript正则表达式--上篇". 正则在String类中的应用 类String支持四种利用正则表达式的方法.分别是search.replace.match和s ...

  8. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  9. js正则表达式replace里有变量的解决方法用到RegExp类

    一直比较害怕使用正则表达式,貌似很深奥很复杂的样子,所以在用js操作字符串的时候,我最多使用的是replace.split.substring.indexOf等函数,这些函数有时候需要多次叠加使用,但 ...

随机推荐

  1. Dockers(29)- 网络连通

    网络连通 背景 基于docker0建了两个容器tomcat01和tomcat02,网段位于172.12.0.0/16 我们又新建了一个网络,网段为192.168.0.0/16,基于此网段新建了两个容器 ...

  2. 安装redis3.0.5

    首先在官网下载redis-3.0.5.tar.gz 在某一个要安装redis的目录下输入命令 tar xzf redis-3.0.5.tar.gz 实现解压缩 进入解压缩后的redis目录 输入mak ...

  3. 一文彻底掌握Apache Hudi异步Clustering部署

    1. 摘要 在之前的一篇博客中,我们介绍了Clustering(聚簇)的表服务来重新组织数据来提供更好的查询性能,而不用降低摄取速度,并且我们已经知道如何部署同步Clustering,本篇博客中,我们 ...

  4. P3307-[SDOI2013]项链【Burnside引理,莫比乌斯反演,特征方程】

    正题 题目链接:https://www.luogu.com.cn/problem/P3307 题目大意 \(n\)个珠子的一个环形项链,每个珠子有三个\(1\sim k\)的整数. 两个珠子不同当且仅 ...

  5. nginx默认端口80被系统占用解决办法

    1.输入netstat -aon|findstr "80"查看端口占用情况 (ano 和aon好像是一样的) 上面可看到是pid值(进程ID)为4 2.输入tasklist|fin ...

  6. Kubernetes集群(RKE)安装ArgoCD排坑

    Photo by Pixabay from Pexels Argo CD是一个声明式的,基于Kubernetes的GitOps持续交付工具.更多的细节参考 ArgoCD官网 的说明,这里记录了一些实践 ...

  7. 解决安装mysql 到start service出现未响应问题

    mysql下载地址 链接: https://pan.baidu.com/s/1vYpsNkVjUHqOKPQl9Y9A9A 提取码: wngn 安装可以参考 今天下载了MySql5.5,没想到的是前面 ...

  8. ajax 中文参数乱码问题不一定是编码格式问题。

    代码要修改用户的信息,写了三个ajax,第一个写完测试没有问题,后面俩逻辑一样的就直接复制粘贴了.到第二个ajax测试的时候发现中文会乱码 如下 $.ajax({//中文参数乱码 url: '/edi ...

  9. Java-多态(上)

    什么是多态 同一方法可以根据发送对象的不同而采取多种不同的行为方式 一个对象实际类型是确定的 但指向其引用类型却有很多 注意事项 多态是方法的多态 属性没有多态 父类和子类 有联系 类型转换异常 Cl ...

  10. RabbitMQ的消息可靠性(五)

    一.可靠性问题分析 消息的可靠性投递是使用消息中间件不可避免的问题,不管是使用哪种MQ都存在这种问题,接下来要说的就是在RabbitMQ中如何解决可靠性问题:在前面 在前面说过消息的传递过程中有三个对 ...