Question

模式属性值^ [-\ w \。\ $ @ \ * \！] {1,30} $不是有效的正则表达式：Uncaught SyntaxError：无效的正则表达式：/ ^ [-\ w \。\ $ @ \ * \！] {1,30} $ /：无效的转义符

我正在这样使用角度。

books-ct.yaml

Answer 1

我不知道为什么（推测：Chrome中的Bug），但是在测试感叹号之前删除转义符可以解决问题。

在[...]组中，\!和!是等效的。

 <input pattern='^[-\w\.\$@\*!]{1,30}$' />

Answer 2

错误消息告诉您Invalid escape（Chrome）或invalid identity escape in regular expression（Firefox）。因此，您的一个或多个转义符（"\<any-character>"）是不正确的。

除了\w，我从您的正则表达式中删除了所有反斜杠。不需要这些，因为您只需要转义特殊字符即可。由于您的RegEx主要由character class组成，因此只需要转义字符类中的特殊字符。 .，$，*，!不是字符类中的特殊字符。并且-不是特殊字符，如果它不是第一个（或在^之后的第二个）。

input {
  border: 2px solid;
}

input:valid {
  border-color: green;
  background: rgba(0, 255, 0, 0.3);
}

input:invalid {
  border-color: red;
  background: rgba(255, 0, 0, 0.3);
}

With escaped <code>!<code> => <code>^[-\w.$@*\!]{1,30}</code><br>
<input pattern="^[-\w.$@*\!]{1,30}$" value="a" /> Should be valid, but throws error<br>
<input pattern="^[-\w.$@*\!]{1,30}$" value="a a " /> Should be invalid, but throws error<br>
<input pattern="^[-\w.$@*\!]{1,30}$" value="a!@@$-!...@" /> Should be valid, but throws error<br>
<br>
Without escaped <code>!<code> => <code>^[-\w.$@*!]{1,30}</code><br>
<input pattern="^[-\w.$@*!]{1,30}$" value="a" /> Should be valid<br>
<input pattern="^[-\w.$@*!]{1,30}$" value="a a " /> Should be invalid<br>
<input pattern="^[-\w.$@*!]{1,30}$" value="a!@@$-!...@" /> Should be valid<br>

说明

pattern始终为RegEx设置u标志。 u在这里表示Unicode。发件人：https://mathiasbynens.be/notes/es6-unicode-regex#impact-html

对于通过HTML pattern属性编译的正则表达式，始终启用 u 标志。这是demo / test case。

但是Unicode标志将只允许保留的转义序列，而\!不是其中的一个，因为!从来都不是特殊字符。

发件人：https://mathiasbynens.be/notes/es6-unicode-regex#impact-syntax

诸如\a（其中a不是转义字符）之类的东西不再等同于a。因此，即使/\a/被视为/a/，/\a/u也会引发错误，因为\a不是保留的转义序列。

PS：Microsoft Edge浏览器似乎确实具有Unicode功能，因为即使所有浏览器的错误信息最好也最清楚，该代码仍将引发错误/\!/u：“ Unicode模式中的无效转义”，但似乎没有在pattern属性上设置unicode标志。

有人可以帮我修复此正则表达式吗

2 个答案:

说明