有人可以帮我修复这个正则表达式吗答案

【问题标题】：Can some one help me fix this regex有人可以帮我修复这个正则表达式吗
【发布时间】：2019-03-11 12:18:43
【问题描述】：

模式属性值 ^[-\w\.\$@\*\!]{1,30}$ 不是有效的正则表达式：Uncaught SyntaxError: Invalid regular expression: /^[-\w\.\ $@\*\!]{1,30}$/：无效转义

我正在使用这样的角度。

 &lt;input pattern='^[-\w\.\$@\*\!]{1,30}$' /&gt;

【问题讨论】：

如果您能详细介绍一下，那就太好了。你想要完成什么，你尝试了什么。如果您需要测试正则表达式，请尝试regex101.com
当我在用户名字段中输入内容时，我在控制台中收到此错误。那里有用户名正则表达式，但我只想知道这个表达式中的错误是什么。它是否不遵循任何规则?
对我有用，运行 sn-p 时没有任何错误。你用的是哪个浏览器？
@Toto — 我在 Chrome 中测试时出错。
我正在使用谷歌浏览器

标签： javascript html regex

【解决方案1】：

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

在[...] 组内，\! 和 ! 是等价的。

 &lt;input pattern='^[-\w\.\$@\*!]{1,30}$' /&gt;

【讨论】：

【解决方案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

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

但 Unicode 标志只允许保留转义序列，\! 不是其中之一，因为! 绝不是特殊字符。

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

\a（其中a 不是转义字符）之类的内容将不再等同于a。所以即使/\a/ 被视为/a/，/\a/u 也会抛出错误，因为\a 不是保留的转义序列。

pattern 属性上设置 unicode 标志。

【讨论】：