javascript - 如果我通过 HTML 中的插值添加正则表达式，为什么会更改它？

Question

我使用此正则表达式作为密码:

^(?=.*[a-zA-Z\d!\x22#$%&'()*+,./:;\x3c=\x3e?@[\]^_`{|}~/\\/-])[A-Za-z\d!\x22#$%&'()*+,./:;\x3c=\x3e?@[\]^_`{|}~/\\/-]{8,50}$

允许使用以下所有特殊字符:

!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~

使用 Online regex tester 运行测试时工作正常- 这是我测试的字符串:

!Q2\w3e4r#$@!%&*?{}[]^_`|<=>~(dd)&,":;./asQ+-A 

我的问题是当/如果我直接在 HTML 中的输入字段中添加正则表达式，那么它就可以正常工作:

<input type="text"  name="password" pattern="^(?=.*[a-zA-Z\d!\x22#$%&'()*+,./:;\x3c=\x3e?@[\]^_`{|}~/\\/-])[A-Za-z\d!\x22#$%&'()*+,./:;\x3c=\x3e?@[\]^_`{|}~/\\/-]{8,50}$" (blur)="onBlur(inputPass.value)" #inputPass>

但是，如果我将其保存在 *.component.ts 中的变量中，然后在 View 中使用它，就像我在 Angular 应用程序(插值)中使用它一样，它就会被更改。换句话说，它改变了我在期望元素时可以通过 Chrome 控制台看到的正则表达式。

signin.component.ts:

this.PASS_PATTERN_VIEW = '^(?=.*[a-zA-Z\d!\x22#$%&'()*+,./:;\x3c=\x3e?@[\]^_`{|}~/\\/-])[A-Za-z\d!\x22#$%&'()*+,./:;\x3c=\x3e?@[\]^_`{|}~/\\/-]{8,50}$';

signin.component.html:

<input type="password" name="password" pattern="{{PASS_PATTERN_VIEW}}" (blur)="onBlur(inputPass.value)" #inputPass>

这是我运行应用程序后得到的正则表达式，它与我原来的正则表达式完全不同:

<input type="password" name="password" pattern="^(?=.*[a-zA-Zd!"#$%&'()*+,./:;<=>?@[]^_`{|}~/\/-])[A-Za-zd!"#$%&'()*+,./:;<=>?@[]^_`{|}~/\/-]{8,50}$" (blur)="onBlur(inputPass.value)" #inputPass>

总结一下，正则表达式正在更改:

^(?=.*[a-zA-Z\d!\x22#$%&'()*+,./:;\x3c=\x3e?@[\]^_`{|}~/\\/-])[A-Za-z\d!\x22#$%&'()*+,./:;\x3c=\x3e?@[\]^_`{|}~/\\/-]{8,50}$

至:

^(?=.*[a-zA-Zd!"#$%&'()*+,./:;<=>?@[]^_`{|}~/\/-])[A-Za-zd!"#$%&'()*+,./:;<=>?@[]^_`{|}~/\/-]{8,50}$

那么应该更改/添加什么来解决此类问题/错误？

Answer 1

由于这里没有回答我的问题，而且我的问题描述也没有太大帮助，所以我发布了 another question处理同样的问题...

问题已解决...它实际上影响了双反斜杠等。

HTML/View 的正则表达式解决方案应该是:

"^(?=[^A-Z]*[A-Z])[A-Za-z\\d!\\x22#$%&'()*+,.:;\\x3c=\\x3e?@[\\]^_`{|}~/\\\\-]{8,50}$"

欲了解更多信息，请。检查demo正如另一个question中提到的