javascript - 如果搜索包含括号或方括号，正则表达式匹配返回未定义

Question

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

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 中测试时，它运行良好。有人可以帮忙吗？

Answer 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)" />