javascript - RegExpExecArray.groups == 在角度库中调用时未定义

Question

我创建了一个包含视频播放器的角度库。在库中，我使用带有命名捕获组的正则表达式。但是在使用库时，我可以看到RegExpExecArray.groups是undefined：

这是从 Angular 库中调用的以下代码的结果：

let input = 'https://www.youtube.com/watch?v=UqQ9NWzIiM4';
let test = new RegExp(/http[s]{0,1}:\/\/(www\.){0,1}youtube\.com\/watch\?v=(?<id>[^&]+)/, 'g').exec(input);
console.log('test', test);

现在，当我在我的 Angular 应用程序中使用完全相同的代码片段时，结果如下：

let matches = new RegExp(/http[s]{0,1}:\/\/(www\.){0,1}youtube\.com\/watch\?v=(?<id>[^&]+)/, 'g')
  .exec('https://www.youtube.com/watch?v=UqQ9NWzIiM4');

console.log('matches', matches);

为什么RegExpExecArray.groups == undefined当我在角度库中使用它时？

该库的代码托管在 Github 上：

• 库的代码
  • 这里我需要从不同类型的url中提取信息
  • tsconfig.json
• 角度应用程序的代码：
  • 在这里，我编写了从库中执行的完全相同的代码行
  • tsconfig.json

我强烈怀疑我的tsconfig文件是罪魁祸首，但是我已经尝试过将它们相同，但没有运气。

角度库tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "types": [ "node" ],
    "lib": ["dom", "es2018"]
  }
}

角度应用tsconfig.json

{
  "compilerOptions": {
    "module": "es2020",
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

标签： javascriptangularregexangular-library

Answer 1

我怀疑这里存在“双重转义”问题。当系统首先解析字符串并在特殊字符处用转义字符填充时，就会发生这种情况；'/', '?', ... 然后再次对照正则表达式检查它。

为此，您可以String.raw在 daggers ` 中使用后跟内容来玩这个技巧：

let input = String.raw`https://www.youtube.com/watch?v=UqQ9NWzIiM4`;
let test = new RegExp(/http[s]{0,1}:\/\/(www\.){0,1}youtube\.com\/watch\?v=(?<id>[^&]+)/, 'g').exec(input);
console.log('test', test);