URl正则表达式验证器HTML5

Question

我正在通过正则表达式验证表单上的url。

  

^（？：http（s）？：//）？[\ w.-] +（？：。[\ w.-] +）+ [\ w -._〜：/？＃[] @！\ $＆'（）* +，; =。] + $

它会验证所有URL，例如：

https://www.example.com

http://www.example.com

www.example.com

example.com

http://blog.example.com

http://www.example.com/product

http://www.example.com/products?id=1&page=2

http://www.example.com#up

http://255.255.255.255

255.255.255.255

但是它也会验证
之类的URL

www.google

www.example

www.example。

www.google。

不被接受的URL的

我对正则表达式的效率不是很高。请帮助需要更改的地方

Answer 1

在HTML5 pattern属性中使用正则表达式时，应非常谨慎地转义字符，因为那些实现了ES6 +标准的浏览器在“看到” [\w\.-]时可能会引发异常（无需转义点，并且使用u标志编译该模式后，它就会变成错误）。

现在，要解决此问题，您可以在(?!www\.[^.]+\.?$)之后添加^前瞻，以使所有以www.开头的输入都失败，然后除了{{ 1}}，然后在字符串末尾添加一个可选的.。

您可以使用

.

请参见regex demo。请注意，在您的模式中我同时逃避了^(?!www\.[^.]+\.?$)(?:https?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w._~:/?#[\\\]@!$&'()*+,;=.-]+$ 和\的困扰，我想您要同时匹配两者（您的原始正则表达式与]与\不匹配）。

请注意，默认情况下，HTML5 [\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]正则表达式是锚定的，开始/结束时不需要pattern和^：

$

但是如果您愿意，您仍然可以保留它们。