浏览器用于HTML5输入类型= url的正则表达式是什么？

Question

我正在研究HTML5输入模式polyfill,我正在尝试在JavaScript中验证输入类型= url,就像浏览器(Chrome)一样,但无法找到有关JavaScript或PERL兼容正则表达式的任何文档.因为它是一个polyfill,我不特别介意它是否完全匹配所有URL(这是不可能的),而是它模仿浏览器的工作方式.

有人会知道PERL语法中的相同模式吗？

谢谢

Answer 1

在 GitHub 上搜索了几个 HTML5 shiv 以查看其他人是否遇到过理想的表达方式后，我相信我找到了一些非常接近但并不完美匹配的东西。

Alexander Farkas ( https://github.com/aFarkas/webshim/blob/master/src/shims/form-shim-extend.js#L285 ) 使用此模式来测试 URL：

/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i;

此外，对于通过 Google 偶然发现此问题的任何人，如果您不需要该模式，但只想通过 JavaScript（可能是 onChange）检查某些内容是否有效，您可以使用 formelement.checkValidity() 方法。显然这对 polyfill（假设没有原生 HTML5 验证支持）没有帮助，但它仍然很有用。

Answer 2

请阅读http://www.w3.org/TR/html5/forms.html#url-state-(type=url)上的相关规范：

你的polyfill应该从清理输入开始，即删除换行符并修剪字符串。“用户代理不得允许用户插入“LF”(U+000A) 或“CR”(U+000D) 字符”这句话也可能很有趣。

结果应该是有效的绝对URL。那里引用的 RFC 3986和3987将描述 URL 验证，有关解析 URL 的部分可能也很有趣。

您的 polyfill 不仅可以验证 URI，还可以解析相对 URI。至少，使用算法验证 URI 会比查找适当的正则表达式简单得多。然而，甚至 RFC 也提到了用于解析附录 B中已验证的URI 的正则表达式。