当参数是 String 和 RegExp 类时，Angular 2 表单验证器中的 RegEx 会产生不同的结果

我正在尝试使用 Angular 2 表单验证器和我放入的正则表达式来验证基本表单元素Validators.pattern()匹配有效的 URL 就是匹配当参数是字符串数据类型时理论上无效的模式。

// example.component.ts

this.exampleForm = fb.group({
    // The patterns below will match most URL structures, and are exactly the same
    const reg = '^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$';
    const patt = new RegExp(/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/);

    'url': ['', [
                Validators.required,
                // Matches many unintended patterns
                Validators.pattern(reg),
                // Works as intended
                Validators.pattern(patt)
           ]
     ]
 });

将上述正则表达式模式放入 RegEx101.com 中时（示例here）针对 JavaScript RegEx 引擎，将不会与字符串“goog”匹配。但是，在模板中example.component.ts类，当第一个模式时，该模式确实与像“goog”这样的字符串匹配Validator.pattern(String)用来。我还让同事提到其他模式在作为字符串插入时表现奇怪，即使 VS Code 中的方法描述接受 String 或 RegExp 类。为什么是这样？

您可以使用

const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';

The ^（在开始时）和$（最后）将由 Angular2 自动添加（请注意，在这种情况下，您负责对模式进行正确分组，尽管在这种情况下不是必需的）。

这里最重要的部分是，您需要将字符串文字中的转义反斜杠加倍，以定义转义特殊正则表达式元字符的文字反斜杠。

而且，你不需要逃避/在正则表达式构造函数符号中。

另外，你还有([\/\w \.-]*)*这是一个非常糟糕的模式：它与[/\\w .-]*，因此删除此处的量化分组。