Codificación de URL en HTML

La codificación de URL es el proceso de convertir caracteres especiales en las URLs a un formato que los navegadores y servidores puedan interpretar correctamente.

¿Qué es la codificación de URL?

Algunos caracteres como espacios, acentos, & o = no pueden aparecer directamente en las URLs. Estos deben codificarse, por ejemplo, un espacio se convierte en %20.

Ejemplos prácticos

Veamos cómo se ve una URL antes y después de la codificación, especialmente con caracteres acentuados y espacios.

https://example.com/search?q=readytools linksy
// encoded: https://example.com/search?q=readytools%20linsky

https://example.com/page?name=János
// encoded: https://example.com/page?name=J%C3%A1nos

¿Cuándo usarlo?

Debes codificar los valores siempre que envíes datos del usuario o caracteres especiales en una URL, como desde un cuadro de búsqueda o formulario.

Ejemplo en HTML

Si una URL en un enlace HTML contiene parámetros con espacios o caracteres especiales, debe codificarse para que funcione correctamente.

<a href="https://example.com/search?q=hello%20world">Search</a>

¿Cómo codificar con JavaScript?

La función integrada encodeURIComponent() de JavaScript ayuda a codificar de forma segura los parámetros de URL para que funcionen correctamente en navegadores y servidores.

encodeURIComponent("János & Kati") 
// output: J%C3%A1nos%20%26%20Kati

Decodificación (URL Decoding)

Si recibes texto ya codificado, puedes decodificarlo a un formato legible usando la función decodeURIComponent().

decodeURIComponent("J%C3%A1nos%20%26%20Kati") 
// output: János & Kati