如果搜索包含括号或方括号，RegEx 匹配将返回 undefined答案

【问题标题】：RegEx matching returns undefined if the search includes parenthesis or square brackets如果搜索包含括号或方括号，RegEx 匹配将返回 undefined
【发布时间】：2019-05-02 18:56:53
【问题描述】：

我有一个或多或少这样使用的脚本：

var $pencilers = {
    '\\(signed\\)': '(assinado)',
    'pencils': 'arte',
    '\\[as ': '[como '
};

var $pencils = 'Al Williamson [as A. W.] (signed)'
var pen = new RegExp(Object.keys($pencilers).join("|"),"g");
$pencils = $pencils.replace(pen, function(matched){
      return $pencilers[matched];
});

console.log($pencils)

// $pencils returns: Al Williamson undefinedA. W.] undefined

不知道为什么它返回 undefined。

当我在 Regex101 中对其进行测试时，它运行良好。有人可以帮忙吗？

【问题讨论】：

你的斜线不匹配。

标签： javascript regex match

【解决方案1】：

如果您执行console.log(matched)，您会注意到您的匹配项与对象键不匹配。您必须先转义字符串。我借了this neat escape function 让它工作：

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}

var $pencilers = {
    '\\(signed\\)': '(assinado)',
    'pencils': 'arte',
    '\\[as ': '[como '
};

var $pencils = $("#id_pencils").val(); // eg. Al Williamson [as A. W.] (signed) //
var pen = new RegExp(Object.keys($pencilers).join("|"),"g");
$pencils = $pencils.replace(pen, function(matched){
      console.log('before escaping: ', matched);
      matched = escapeRegExp(matched);
      console.log('after escaping: ', matched);
      return $pencilers[matched];
});
console.log($pencils);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="id_pencils" value="Al Williamson [as A. W.] (signed)" />

你也可以把它转过来，让你的对象键不转义，在构建你的正则表达式时转义它们。事实上，我更喜欢并推荐使用这种方法，因为它使您的代码更具可读性。

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}

var $pencilers = {
    '(signed)': '(assinado)',
    'pencils': 'arte',
    '[as ': '[como '
};

var $pencils = $("#id_pencils").val(); // eg. Al Williamson [as A. W.] (signed) //
var pen = new RegExp(Object.keys($pencilers).map(escapeRegExp).join("|"),"g");
$pencils = $pencils.replace(pen, function(matched){
      return $pencilers[matched];
});
console.log($pencils);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="id_pencils" value="Al Williamson [as A. W.] (signed)" />

【讨论】：