¿Qué expresión regular usan los navegadores para el tipo de entrada HTML5 = url?

Question

Estoy trabajando en un polyfill de patrón de entrada HTML5 y estoy tratando de validar un tipo de entrada = url en JavaScript exactamente como el navegador (Chrome) pero no puede encontrar ninguna documentación en una expresión regular compatible JavaScript o PERL. Como es un relleno múltiple, no me importa si coincide con todas las URL exactamente (lo que es imposible) sino que imita cómo funciona el navegador.

¿Alguien sabe de un patrón idéntico en la sintaxis PERL?

Gracias

Answer 1

Leer la especificación relativa al http://www.w3.org/TR/html5/forms.html#url-state-(type=url):

Su polyfill debe comenzar con la entrada de desinfección, es decir, la eliminación de saltos de línea y el recorte de la cadena. La frase "Los agentes de usuario no deben permitir que los usuarios inserten caracteres" LF "(U + 000A) o" CR "(U + 000D)" también pueden ser interesantes.

Los resultados deben ser un valid, absolute URL. Los RFCs allí referenciados 3986 y 3987 describirán la validación de URL, la sección sobre parsing URLs también puede ser interesante.

Su polyfill podría no solo validar los URI, sino también resolve relative URIs. Al menos, validar un URI será mucho más simple con algortihm en lugar de encontrar una expresión regular adecuada. Sin embargo, incluso el RFC menciona una expresión regular para analizar un URI ya validado en appendix B.

Answer 2

Después de buscar a través de varios shivs HTML5 en GitHub para ver si alguien más ha encontrado una expresión ideal, creo que encontré algo que está muy cerca pero no coincide perfectamente.

Alexander Farkas (https://github.com/aFarkas/webshim/blob/master/src/shims/form-shim-extend.js#L285) utiliza este patrón para probar 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; 

Además, sólo para cualquier persona que tropieza a través de esta vía Google, si no es necesario el patrón, sino que sólo quiere comprobar si algo es válido a través de JavaScript (quizás onChange), puede usar el método formelement.checkValidity(). Obviamente, esto no ayuda con un polyfill (que asume que no es compatible con la validación nativa de HTML5), pero de todos modos es útil.