介绍
以下是三个和$相关的正则表达式:
- $& - 正则表达式匹配的文本
- $` - 匹配文本的左侧内容
- $' - 匹配文本的右侧内容
通过上面简单的描述或许没有特别深的概念,下面举个来个例子:
var text = "abc123def", total, left, right;
total = text.replace(/\d+/g, "[$&]"); // abc[123]def
left = text.replace(/\d+/g, "[$`]"); // abc[abc]def
right = text.replace(/\d+/g, "[$']"); // abc[def]def
如果不知道这三个表达式在正则中的特殊作用,那么期望的结果应该是:abc[$&]def, abc[$`]def, abc[$']def
,可是它们缺带来了意向不到的结果:
-
$&
:表示匹配到的内容;/\d+/g
匹配到了123
,因此replace时会把$&
替换成123
。 -
$`
:表示匹配文本左侧的内容,/\d+/g
匹配到了123
,其左侧文本为abc
,其因此replace时会把$`
替换成abc
-
$'
:表示匹配文本左侧的内容,/\d+/g
匹配到了123
,其右侧文本为def
,其因此replace时会把$'
替换成def
实际例子
假设要把一串压缩过的js代码放到html文件的末尾,正则表示式可以这么写:
_htmlContent = _htmlContent.replace("</body>", _jsContent+"</body>")
一般情况下这个表达式没问题,但是js代码经过压缩混淆后如果可能会出现如下场景:
a.R&&$&&!$[f] // $是一个函数名称的替换
那么上述replace方法会让_htmlContent
中的js代码片段引入</body>
,进而报错。
存在此问题的常用库
- vue.js的注释中存在
$`
,如果想把vue放入到html文件中需要注意 -
lcxfs1991/html-res-webpack-plugin:这是一个webpack插件,可以把js和css内容打包到html文件中去;但是没有考虑到
$&、$`
等情况,为此我对它进行修改,发了一个新的npm包
参考
Special $ References In JavaScript's String.replace() Method
$& - Refers to the entire text of the current pattern match.
$` - Refers to the text to the left of the current pattern match.
$' - Refers to the text to the right of the current pattern match