javascript - 当参数是String与RegExp类时，Angular 2 Form Validators中的RegEx产生不同的结果

我正在尝试使用Angular 2 Form Validators验证基本表单元素，而我放入Validators.pattern()中以匹配有效URL的RegEx匹配的是理论上在参数为String数据类型时无效的模式。

// 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)
           ]
     ]
 });

上面的RegEx模式放在以JavaScript RegEx引擎为目标的RegEx101.com(示例here)中时，将与字符串'goog'不匹配。但是，在example.component.ts类的模板中，当使用第一个Validator.pattern(String)时，该模式确实与“goog”之类的字符串匹配。我也有同事提到过其他模式，当以字符串形式插入时，行为会很奇怪，即使VS Code中的方法描述接受了String或RegExp类。为什么是这样？

最佳答案

您可以使用

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

Angular2将自动添加^(在开始处)和$(在末尾)(请注意，在这种情况下，您负责适当地对模式进行分组，尽管在这种情况下不是必需的)。

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

另外，您不需要以正则表达式构造函数表示法转义/。

另外，您的([\/\w \.-]*)*模式非常糟糕:与[/\\w .-]*相同，因此请在此处删除量化分组。