Codificador de URL
Codifica y decodifica URLs.
https://www.google.com/search?q=caf%C3%A9%20con%20leche
Cómo funciona la codificación de URL
Una URL solo puede contener un conjunto limitado de caracteres ASCII. Cualquier otro carácter (espacios, tildes, eñes, o símbolos como &, = o ? cuando aparecen fuera de su función habitual) tiene que representarse con secuencias %XX, el código hexadecimal de cada byte en UTF-8.
encodeURI está pensado para codificar una URL completa: no toca los caracteres que forman parte de su estructura (: / ? & = #), porque si los codificara la URL dejaría de funcionar como tal. encodeURIComponent está pensado para codificar solo un fragmento que vas a insertar dentro de una URL, como el valor de un parámetro, así que sí codifica esos caracteres estructurales: si no lo hiciera, un & dentro del valor cortaría la URL en el sitio equivocado.
Se usa para pasar texto con espacios o acentos como parámetro de una URL, depurar por qué un enlace no funciona por tener caracteres sin escapar, o decodificar una URL que llega codificada en los logs de un servidor.
Ejemplo práctico
Con encodeURI, https://www.google.com/search?q=café con leche se convierte en https://www.google.com/search?q=caf%C3%A9%20con%20leche: el dominio y la estructura quedan intactos, solo se codifica el texto de la búsqueda. Con encodeURIComponent sobre ese mismo texto completo, hasta el https:// quedaría codificado, porque asume que el resultado va a insertarse dentro de otra URL, no a usarse tal cual.
Preguntas frecuentes
¿Cuál es la diferencia entre encodeURI y encodeURIComponent?
encodeURI codifica una URL completa y respeta los caracteres estructurales (: / ? & = #). encodeURIComponent codifica un fragmento suelto (como el valor de un parámetro) y sí escapa esos caracteres, para que no se confundan con la estructura de la URL que lo contiene.
¿Por qué al decodificar me da un error?
Porque el texto contiene una secuencia %XX incompleta o inválida, por ejemplo un símbolo % suelto que no va seguido de dos dígitos hexadecimales. Revisa que el texto pegado sea exactamente el que se codificó.
¿Por qué un espacio se convierte en %20 y no en +?
%20 es la codificación estándar de un espacio en una URL (RFC 3986). El signo + para representar espacios es una convención distinta, específica del formato application/x-www-form-urlencoded que usan los formularios HTML, no de la codificación de URL en general.
¿Puedo codificar una URL entera, incluido el https://?
Con encodeURI no hace falta: esa parte se deja tal cual porque es estructura de la URL. Solo tiene sentido codificar también el https:// con encodeURIComponent si vas a meter esa URL completa como valor de otro parámetro, por ejemplo una URL de redirección.