Qué hace esta herramienta
Codifica y decodifica URLs con tres modos para los tres contextos donde el escapado funciona distinto:
- Component (
encodeURIComponent): codifica todo exceptoA-Z a-z 0-9 - _ . ! ~ * ' ( ). Lo que usas para parámetros de query y partes de path. - URI (
encodeURI): preserva la estructura de la URI —: / ? # & = +no se escapan. Lo que usas para dejar pasar una URL completa que ya contiene su propia estructura. - Form (
application/x-www-form-urlencoded): igual que component pero los espacios pasan a+y un+literal pasa a%2B. Lo que usa el navegador al enviar un formularioPOSTclásico.
La decodificación es UTF-8 consciente y reporta errores explícitos cuando la entrada contiene secuencias %XX mal formadas.
Cuándo la usarías
- Construir una URL con un parámetro que contiene espacios o caracteres no ASCII.
- Ver qué hay realmente dentro de una URL larga ofuscada por porcentajes.
- Convertir entre los tres modos cuando una API espera form pero tú tienes component (o al revés).
- Pegar una salida de
curlo de los DevTools y leerla.
Cómo funciona
La codificación usa las primitivas del navegador (encodeURIComponent, encodeURI) más una transformación posterior para el modo form. La decodificación usa decodeURIComponent envuelto para producir mensajes de error útiles cuando aparecen secuencias inválidas.
Las tres variantes corren localmente sin enviar nada al servidor.
Notas
¿Por qué encodeURIComponent escapa !? No lo hace — los caracteres ! ~ * ' ( ) se preservan tal cual. Si tu API se queja, probablemente quieras el modo form que codifica de forma más conservadora, o codificar manualmente con un alfabeto personalizado.
¿Y los emojis o los caracteres no BMP? Se codifican como pares de surrogate UTF-8 (varios bytes %XX). Los modernos APIs los aceptan sin problema; algunos sistemas heredados pueden tropezar.
¿Por qué + en form-urlencoded? Por compatibilidad con el formulario HTML clásico. Si la API que recibe espera %20 en su lugar, usa el modo component.