regex - 浏览器对 HTML5 输入 type=url 使用什么正则表达式？

Question

我正在研究 HTML5 输入模式 polyfill，并且我正在尝试验证 JavaScript 中的输入 type=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的正则表达式。