Codificador / Decodificador de URL
Codifica o decodifica cadenas con porcentaje para usarlas de forma segura en URL, parámetros de consulta y segmentos de ruta.
- Pega en la caja de arriba la cadena que quieras codificar (o decodificar).
- Elige Component para un único valor de consulta o segmento de ruta, o URL completa para una URL entera que solo tenga algunos caracteres inseguros.
- Pulsa Codificar o Decodificar. El resultado reemplaza la entrada in situ.
- Copia el resultado o pulsa Limpiar para empezar de nuevo.
¿Qué hace?
La codificación URL (porcentaje) reemplaza los caracteres inseguros o ambiguos en una URL por % seguido de su valor de byte UTF-8 en hexadecimal. El modo Component usa encodeURIComponent() y codifica cada carácter reservado, ideal para valores que incrustas en una cadena de consulta o ruta. El modo URL completa usa encodeURI(), que preserva caracteres estructurales de URL como :/?#&=.
Ejemplo
Entrada:
hello world & café / 日本語Codificado como Component:
hello%20world%20%26%20caf%C3%A9%20%2F%20%E6%97%A5%E6%9C%AC%E8%AA%9ECodificado como URL completa:
hello%20world%20&%20caf%C3%A9%20/%20%E6%97%A5%E6%9C%AC%E8%AA%9EObserva que URL completa deja & y / tal cual porque tienen significado estructural en una URL.
Errores comunes y advertencias
La mayoría de los problemas de codificación vienen de elegir el modo incorrecto o de ejecutar la herramienta dos veces sobre la misma entrada. Abajo se listan los casos más frecuentes.
- Usar encodeURI para valores de consulta. encodeURI("a&b=c") devuelve a&b=c (sin cambios), lo que rompe la cadena de consulta. Usa el modo Component (encodeURIComponent) para los valores.
- Doble codificación. Codificar hello%20world una segunda vez produce hello%2520world. Decodifica primero o salta una capa.
- Olvidar #. Un # dentro del valor de una consulta se interpreta como inicio de fragmento si no se codifica como %23.
- Confusión con el signo más. + significa espacio en cuerpos form-encoded, pero es un + literal en la ruta o consulta de una URL. Para enviar un signo más real en un valor de consulta, codifícalo como %2B.
- Secuencia de porcentaje malformada. Un % literal que nunca se codificó hace que decodeURIComponent lance URI malformed. Codifica el % como %25 o elimina los porcentajes sueltos antes de decodificar.
- UTF-8 vs servidores heredados Latin-1. Esta herramienta siempre usa UTF-8. Algunos sistemas muy antiguos esperan Latin-1 / windows-1252: allí é es %E9, no %C3%A9. Si ves mojibake, el otro extremo no usa UTF-8.
Preguntas frecuentes
¿Cuál es la diferencia entre encodeURI y encodeURIComponent?
encodeURIComponent escapa todo lo que no sea letra, dígito o uno de -_.!~*'(), por lo que es seguro para valores individuales de consulta y segmentos de ruta. encodeURI deja en paz los caracteres reservados de URL como :/?#&=, así que sirve para codificar una URL completa que ya tiene estructura. Usa Component el 95% del tiempo; usa URL completa solo cuando tengas una URL casi válida con espacios o Unicode sueltos.
¿Qué caracteres hay que codificar de verdad en una cadena de consulta?
Dentro de un valor, los delimitadores & y = deben codificarse (si no, parecen separadores). El espacio pasa a %20 o +. El marcador de fragmento # debe codificarse. Además: /, ?, cualquier cosa no ASCII y los caracteres de control. encodeURIComponent maneja todo eso; encodeURI deja &, =, /, ?, # sin codificar porque son estructurales.
¿Por qué mi URL se codifica dos veces?
La doble codificación ocurre cuando codificas un valor que ya estaba codificado. Un espacio pasa a %20 y luego ese % pasa a %25, dando %2520. Suele pasar al volver a pasar una URL ya codificada por encodeURIComponent, o porque un framework añade codificación automática encima de la tuya. Decodifica una vez y vuelve a codificar limpiamente, o salta una capa.
¿Cómo maneja caracteres no ASCII como emojis o letras acentuadas?
Los codificadores de JavaScript convierten los caracteres no ASCII primero a bytes UTF-8 y luego codifican cada byte con porcentaje. Así é se convierte en %C3%A9 (dos bytes) y un emoji como 😀 en %F0%9F%98%80 (cuatro bytes). La decodificación invierte el proceso. Es el comportamiento estándar RFC 3986 y funciona con cualquier servidor moderno.
¿Por qué decodificar falla con "URI malformed"?
decodeURIComponent lanza error al ver una secuencia de porcentaje inválida: un % solitario sin dos dígitos hex (por ejemplo %ZZ o solo %), o secuencias UTF-8 inválidas (como %C3 sin un byte de continuación válido). Causas comunes: un % literal en la entrada que nunca se codificó, o una cadena ya decodificada una vez que aún contiene signos de porcentaje.
¿Los espacios deben ser + o %20?
Ambos aparecen en la práctica. %20 es correcto en todas partes: rutas, cadenas de consulta y fragmentos. El atajo + solo significa "espacio" dentro del formato application/x-www-form-urlencoded usado al enviar formularios HTML. Esta herramienta usa %20 porque encodeURIComponent lo hace. Si necesitas específicamente +, reemplaza %20 por + después de codificar.