和$相关的几个特殊正则表达式

介绍

以下是三个和$相关的正则表达式：

• $& - 正则表达式匹配的文本
• $` - 匹配文本的左侧内容
• $' - 匹配文本的右侧内容

通过上面简单的描述或许没有特别深的概念，下面举个来个例子：

  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