我在表单输入中有以下模式属性：
pattern="^((https?:\/\/)?(www\.)?|(www\.))[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(\/\S*)?$"
它应该进行非常基础的客户端 URL 验证并接受以下用户输入：
example.comexample-test.comhttps://example.comhttp://example.comexamplecomexamplecom.大约一年前，它在 Chrome（和其他现代浏览器）上运行良好，但现在它不再工作并给出控制台错误：
Pattern attribute value ^(https?://)?(www.)?(\[a-zA-Z0-9-\]+\[.\])+\[a-zA-Z\]{2,}(/\\S*)?$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^(https?://)?(www.)?(\[a-zA-Z0-9-\]+\[.\])+\[a-zA-Z\]{2,}(/\\S)?$/v: Invalid character class\*\
我尝试更改模式以使其正常工作，但我只能找到一个接受不带连字符的 URL（第一个输入中的模式）的解决方案。奇怪的是，从某个时候开始，Chrome 开始与字符类语法作斗争，但相同的代码在 Firefox 和 Safari 上却可以按预期工作。
有谁知道 Chrome 出现错误的原因以及如何让它像 Firefox 一样工作？
这是代码示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test pattern</title>
</head>
<body>
<form id="myForm" onsubmit="event.preventDefault();">
<label>URL without hyphen (eg example.com)
<br>
<input
pattern="^(https?:\/\/)?(www\.)?(\w+\.)+[a-zA-Z]{2,}(\/\S*)?$"
class="text-input"
required
type="text"
>
</label>
<br>
<label>URL with hyphen (eg example-dash.com)
<br>
<input
pattern="^((https?:\/\/)?(www\.)?|(www\.))[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(\/\S*)?$"
class="text-input"
required
type="text"
>
</label>
<br>
<button type="submit">submit</button>
</form>
</body>
</html>
我也遇到了同样的问题，现在已经解决了。 如果不转义，以下字符将不再在 Chrome 中工作。
pattern="[(]"
pattern="[)]"
pattern="[[]"
pattern="[{]"
pattern="[}]"
pattern="[/]"
pattern="[-]"
pattern="[|]"
pattern="[&&]"
pattern="[!!]"
pattern="[##]"
pattern="[$$]"
pattern="[%%]"
pattern="[**]"
pattern="[++]"
pattern="[,,]"
pattern="[..]"
pattern="[::]"
pattern="[;;]"
pattern="[<<]"
pattern="[==]"
pattern="[>>]"
pattern="[??]"
pattern="[@@]"
pattern="[``]"
pattern="[~~]"
pattern="[_^^]"