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

Question

我正在尝试使用 Angular 2 表单验证器来验证基本表单元素，而我放入 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 模式，当放置到 RegEx101.com(示例 here)中以 JavaScript RegEx 引擎为目标时，将不会与字符串“goog”匹配。但是，在 example.component.ts 类的模板中，当第一个 Validator.pattern(String) 被使用时，模式确实与像 'goog' 这样的字符串匹配.我也有同事提到其他模式在作为字符串插入时表现异常，即使 VS Code 中的方法描述接受 String 或 RegExp 类。这是为什么？

Answer 1

你可以使用

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

^(在开头)和$(在结尾)将由 Angular2 自动添加(请注意，您负责将模式正确分组这种情况下，尽管在这种情况下不需要)。

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

此外，您不需要在正则表达式构造函数符号中转义 /。

此外，您的 ([\/\w\.-]*)* 是一个非常糟糕的模式:它与 [/\\w .-] 相同*，所以去掉这里的量化分组。