MT
My Toolbox

Codificador y Decodificador de URL — Codifica Caracteres Especiales Online

Pega una URL con caracteres especiales y obtén la versión codificada al instante — o decodifica una cadena llena de %20%3F a texto legible. Usa el mismo encodeURIComponent/decodeURIComponent que los navegadores. Todo corre en tu navegador; nada toca un servidor.

Operation Mode
tools.urlEncoder.inputText
tools.urlEncoder.enterTextToEncode
tools.urlEncoder.encodedOutput
tools.urlEncoder.encodedOutput
Codifica y decodifica cadenas URL

URL Encoding converts special characters into a format that can be transmitted over the internet.

For example, spaces become %20, and other special characters like &, =, and ? are also encoded.

This tool uses encodeURIComponent() anddecodeURIComponent() functions, which encode all characters except:

  • Alphabetic characters (A-Z, a-z)
  • Digits (0-9)
  • Special characters: - _ . ! ~ * ' ( )

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

  1. Elige el modo Codificar o Decodificar.
  2. Pega o escribe tu texto — una URL completa, un valor de parámetro, o una cadena ya codificada.
  3. El resultado se actualiza mientras escribes. Cópialo con un clic.
  4. Para 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. Bugs de doble-codificación aquí causan errores "invalid redirect_uri" difíciles de rastrear.

Decodificar enlaces de tracking y parámetros UTM

Las herramientas de marketing generan URLs con parámetros UTM codificados que son ilegibles. Pega la URL completa aquí para ver qué dicen utm_campaign, utm_source y utm_content sin parsear manualmente %20 y %3D.

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

1.

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.

2.

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 #1 que veo en código de manejo de URLs. Siempre verifica si tu framework ya codifica antes de agregar otra capa.

3.

+ 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 — decodeURIComponent no lo hace automáticamente.

4.

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 & guides

Output

C%2B%2B%20tutorials%20%26%20guides

Decodificar 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%3Dspring

Output

https://example.com/landing?utm_source=newsletter&utm_campaign=spring

Características

  • Modos de codificación y decodificación con cambio instantáneo
  • Usa encodeURIComponent/decodeURIComponent estándar — igual que los navegadores
  • Maneja Unicode, emoji y caracteres multi-byte correctamente
  • Muestra resultados mientras escribes — sin botón de envío
  • Copia al portapapeles con un clic
  • Funciona 100% 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í — axios, fetch con URLSearchParams, etc.).

Consejos y flujos de trabajo relacionados