Cómo Funciona la Codificación URL (RFC 3986)
Las URLs solo pueden contener un conjunto limitado de caracteres ASCII. Cualquier cosa fuera de ese conjunto (espacios, Unicode, delimitadores reservados usados como datos) debe ser "codificada en porcentaje": un % seguido de dos dígitos hexadecimales que representan el valor del byte. Un espacio se convierte en %20, una barra en un valor de query se convierte en %2F, y la ñ se convierte en %C3%B1 (dos bytes UTF-8).
Esto no es opcional. Si metes un & crudo en un valor de parámetro, el servidor lo interpreta como separador de parámetros, no como dato. He depurado este problema exacto al menos una docena de veces: una API devolviendo "parámetro faltante" porque alguien olvidó codificar el & en un nombre como "Ben & Jerry's."
La especificación (RFC 3986, Sección 2.1) define "caracteres no reservados" que nunca necesitan codificación: A-Z, a-z, 0-9, y - _ . ~. Todo lo demás es reservado (tiene significado especial en URLs) o debe codificarse. La parte complicada: si codificas caracteres reservados depende del contexto. Un / en el path es un delimitador, pero un / dentro de un valor de query es dato y debe codificarse como %2F.
Cómo Usar
- 1Elige el modo Codificar o Decodificar.
- 2Pega o escribe tu texto: una URL completa, un valor de parámetro, o una cadena ya codificada.
- 3El resultado se actualiza mientras escribes. Cópialo con un clic.
- 4Para codificar: pega solo la parte del valor (no la URL completa) para evitar doble-codificación de la estructura.
Cuándo Lo Necesitarás
Construir query strings con input de usuario
El usuario busca "zapatos & bolsos". Si no codificas ese &, el servidor lo divide en dos parámetros. encodeURIComponent("zapatos & bolsos") te da una cadena segura para poner en ?q=.
Depurar OAuth y URLs de redirección
Los flujos OAuth pasan redirect_uri como parámetro de query. Esa URI contiene ? y &. Necesitas codificar toda la URL de redirección para que viaje segura como un solo valor de parámetro. Los bugs de doble-codificación aquí causan errores "invalid redirect_uri" que cuestan horas de depuración.
Decodificar enlaces de tracking y parámetros UTM
Las herramientas de marketing generan URLs con parámetros UTM codificados que son ilegibles a simple vista. Pega la URL completa aquí para ver qué dicen utm_campaign, utm_source y utm_content.
Pasar JSON o datos especiales en parámetros URL
Algunas APIs aceptan JSON en query strings (mala práctica, pero existe). Los caracteres { } " necesitan codificación. Esta herramienta te muestra exactamente cómo queda la versión codificada antes de hardcodearla.
Errores Comunes a Evitar
No codifiques la URL completa, solo los valores
encodeURIComponent("https://example.com/path?q=hello") codifica el :// y ? también, rompiendo la estructura. Codifica valores individuales de parámetros. Usa encodeURI() solo si necesitas codificar una URL completa preservando su estructura.
Cuidado con la doble-codificación
Si un valor ya está codificado (%20), codificarlo de nuevo convierte %20 en %2520 (el % se codifica a %25). Este es el bug más frecuente que veo en código de manejo de URLs. Siempre verifica si tu framework ya codifica antes de agregar otra capa.
+ vs %20 para espacios: conoce la diferencia
En query strings (application/x-www-form-urlencoded), + significa espacio. En segmentos de path, solo %20 es válido. encodeURIComponent de JavaScript siempre usa %20. Si estás decodificando y ves +, puede que necesites reemplazarlos con espacios primero, porque decodeURIComponent no lo hace automáticamente.
La codificación UTF-8 ocurre antes de la codificación porcentual
El carácter ñ primero se codifica como bytes UTF-8 (0xC3 0xB1), luego cada byte se codifica en porcentaje (%C3%B1). Si tu sistema usa Latin-1 en vez de UTF-8, obtienes %F1, un byte en vez de dos. Esta discrepancia causa caracteres corruptos. Siempre usa UTF-8.
Ejemplos
Codificar una búsqueda con caracteres especiales
Un usuario busca "C++ tutorials & guides". Los tres caracteres especiales necesitan codificación.
Input
C++ tutorials & guidesOutput
C%2B%2B%20tutorials%20%26%20guidesDecodificar un parámetro de URL de tracking
Una URL de marketing contiene un redirect codificado. decodifícalo para ver a dónde va realmente.
Input
https%3A%2F%2Fexample.com%2Flanding%3Futm_source%3Dnewsletter%26utm_campaign%3DspringOutput
https://example.com/landing?utm_source=newsletter&utm_campaign=springCaracterísticas
- Modos de codificación y decodificación con cambio instantáneo
- Usa encodeURIComponent/decodeURIComponent estándar, igual que los navegadores
- Unicode, emoji y caracteres multi-byte se manejan correctamente
- Resultados en tiempo real mientras escribes
- Copia al portapapeles con un clic
- Todo se procesa en tu navegador. Cero peticiones de red, sin recolección de datos.
Preguntas Frecuentes
¿Cuál es la diferencia entre encodeURI() y encodeURIComponent()?
encodeURI() es para codificar una URL completa: deja :, /, ?, # y & intactos porque son estructurales. encodeURIComponent() codifica todo excepto A-Z, 0-9, y - _ . ! ~ * ' ( ). En la práctica casi siempre quieres encodeURIComponent() porque estás codificando un valor para poner dentro de una URL, no la URL misma.
¿Por qué mi URL se rompe cuando incluyo & o = en un valor de parámetro?
Porque & separa parámetros y = separa clave de valor en query strings. Si tu valor contiene estos caracteres literalmente, el parser divide ahí. Codifica el valor: "Tom & Jerry" se convierte en "Tom%20%26%20Jerry". Ahora el parser ve un parámetro con un ampersand codificado, no dos parámetros separados.
¿Debo usar %20 o + para espacios?
Depende del contexto. En el query string de application/x-www-form-urlencoded (formularios HTML), + significa espacio. En segmentos de path y otros contextos, solo %20 es válido. encodeURIComponent() de JavaScript siempre produce %20. La mayoría de servidores aceptan ambos en query strings, pero si construyes segmentos de path, usa %20.
¿Cómo se codifican caracteres Unicode como emoji o texto en español?
El carácter primero se convierte a bytes UTF-8, luego cada byte se codifica en porcentaje. El emoji 🎉 son 4 bytes UTF-8: F0 9F 8E 89, así que se convierte en %F0%9F%8E%89. La ñ son 2 bytes: C3 B1 → %C3%B1. Esta herramienta maneja todo automáticamente. solo pega y funciona.
¿Qué causa la doble-codificación y cómo la arreglo?
La doble-codificación ocurre cuando codificas una cadena ya codificada. %20 se convierte en %2520 porque el % se codifica a %25. Causa común: tu framework codifica automáticamente y tú también llamas encodeURIComponent(). Solución: decodifica primero (para obtener el valor crudo), luego codifica una vez. O verifica si tu librería HTTP ya maneja la codificación. La mayoría sí lo hace (axios, fetch con URLSearchParams, etc.).
Consejos y flujos de trabajo relacionados
- ¿Necesitas codificar datos binarios en lugar de caracteres de URL? Prueba el Codificador Base64.
- Si vas a codificar un JSON en una URL, dale formato legible primero con el Formateador JSON.
- Genera un código QR para tu URL ya codificada con el Generador de Código QR.
- ¿Quieres generar un hash de la URL para invalidar caché? Usa el Generador de Hash.