与 ng-pattern 一起使用时，看起来有效的正则表达式模式会抛出错误？

Question

我发现并想使用以下模式((ht|f)tp(s?)\:\/\/|~\/|\/)?([\w]+:\w+@)?([a-zA-Z]{1}([\w\-]+\.)+([\w]{2,5}))(:[\d]{1,5})?((\/?\w+\/)+|\/?)(\w+\.[\w]{3,4})?((\?\w+=\w+)?(&\w+=\w+)*)?

Regular expressions 101 认为它是 javascript.

的有效正则表达式

然而，当我尝试在我的 ng-pattern 中使用它时，它会抛出以下错误：

SyntaxError: Invalid regular expression: /^((ht|f)tp(s?)://|~/|/)?([w]+:w+@)?([a-zA-Z]{1}([w-]+.)+([w]{2,5}))(:[d]{1,5})?((/?w+/)+|/?)(w+.[w]{3,4})?((?w+=w+)?(&w+=w+)*)?$/: Invalid group
    at new RegExp (native)

我实现这个的确切方法是我在配置文件中定义了模式，然后我将它加载到控制器中，然后它被传递到 ng-pattern.

Answer 1

要在配置中使用正则表达式，您需要将其存储为字符串。由于 JS 引擎将字符串视为带有转义序列的 C 字符串，因此转义正则表达式元字符的反斜杠必须加倍：

^((ht|f)tps?://|~/|/)?(\w+:\w+@)?([a-zA-Z]([\w-]+\.)+(\w{2,5}‌))(:\d{1,5})?((/‌?\w+/)+|/?)(\w+\.\w{3,4})?((\?\w+=\w+)?(&\w+=\w+)*)?$

此外，我删除了所有不必要的转义：from /，from - in [\w-]（如字符 class 的 end/start， - 被视为文字连字符），并从 [\d] 和 [\w] 中删除了不必要的 [...]。

参见 regex101.com 处的 regex demo。

与 ng-pattern 一起使用时，看起来有效的正则表达式模式会抛出错误？

Valid looking regex pattern throws error when used with ng-pattern ?

javascript

regex

angularjs

ng-pattern