RegExpExecArray.groups == 在角度库中调用时未定义答案

【问题标题】：RegExpExecArray.groups == undefined when called inside angular libraryRegExpExecArray.groups == 在角度库中调用时未定义
【发布时间】：2021-09-21 02:23:07
【问题描述】：

我创建了一个包含视频播放器的 Angular 库。在库中，我使用带有命名捕获组的正则表达式。但是在使用库时，我可以看到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 应用程序中使用完全相同的代码 sn-p 时，结果如下：

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);

当我在 Angular 库中使用 RegExpExecArray.groups == undefined 时，为什么是它？

该库的代码托管在 Github 上：

库代码
- Here I need to extract the information from different types of urls
- tsconfig.json
角度应用程序的代码：
- Here I've written the exact same lines of code that would be executed from the library
- tsconfig.json

我强烈怀疑我的 tsconfig 文件是造成这种情况的罪魁祸首，但是我已经尝试将它们放在一起，但没有运气。

角库tsconfig.json

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

角度应用tsconfig.json

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

【问题讨论】：

考虑使用URL解析url
我最终以es2015 为目标让它工作。无论如何，Angular 仍然会为 es5 生成包。

标签： javascript angular regex angular-library

【解决方案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);

【讨论】：