🔗

Codificador y Decodificador de URL

Codifica o decodifica URLs y parámetros de forma segura — con soporte Unicode completo.

El modo componente codifica todo lo especial — ideal para un solo valor o parámetro.

Tu resultado aparecerá aquí

La codificación de URL existe porque las URL se diseñaron hace décadas alrededor de un pequeño conjunto de caracteres ASCII seguros, y todo lo demás —espacios, letras acentuadas, escritura árabe, emoji e incluso parte de la puntuación— tiene que colarse disfrazado. El disfraz es la codificación porcentual: cada byte inseguro se convierte en un % seguido de dos dígitos hexadecimales. Cuando funciona, ni lo notas. Cuando se rompe, aparecen los bugs clásicos: una búsqueda de "C++" que encuentra "C ", una URL de redirección que muere en el primer &, o un enlace con espacios que funciona en una app y se rompe en otra. Esta herramienta codifica y decodifica en ambas direcciones, enteramente en tu navegador.

Cómo funciona el codificador

Pega texto o una URL en cualquiera de los campos. El codificador convierte los caracteres inseguros a su forma porcentual; el decodificador lo revierte. Hay dos modos distintos porque JavaScript ofrece dos funciones con comportamientos importantes de distinguir: `encodeURIComponent` codifica todo lo reservado, incluidos &, =, ? y /, que es lo que quieres para el valor de un parámetro; `encodeURI` deja en paz esos caracteres estructurales, que es lo que quieres para una URL completa. Elegir la equivocada es la causa raíz de la mayoría de los errores de codificación.

Cómo funciona la codificación porcentual

Carácter → bytes UTF-8 → %XX por cada byte espacio → %20 & → %26 ? → %3F é → %C3%A9 日 → %E6%97%A5 encodeURIComponent("a&b=c") → "a%26b%3Dc" encodeURI("https://x.com/a b") → "https://x.com/a%20b"

Los caracteres no ASCII se convierten primero a bytes UTF-8, y cada byte recibe su propio %XX: por eso é se convierte en dos escapes y un carácter CJK en tres. Eso también explica el crecimiento del texto no latino codificado: una palabra árabe triplica su longitud. El signo + es una trampa histórica: solo en cadenas de consulta, una aplicación puede interpretar + como espacio, convención heredada del envío de formularios HTML. Una URL con un + genuino en un parámetro debe codificarlo como %2B o algunos servidores lo convertirán silenciosamente en un espacio.

Lo que conviene saber sobre la codificación de URL

  • 1Usa encodeURIComponent para valores y encodeURI para URL completas. Codificar una URL entera con encodeURIComponent destruye su estructura: el :// y cada / se convierten en escapes. Codificar el valor de un parámetro con encodeURI deja & y = sin escapar, y el valor se mezcla con la estructura. Esta única distinción evita la mayoría de los errores reales.
  • 2Nunca codifiques dos veces. Codificar %20 otra vez produce %2520, y el síntoma visible es %25 apareciendo en URL, o espacios mostrados como %20 literal. La doble codificación suele ocurrir cuando dos capas de un sistema codifican cada una a la defensiva. Decodifica del todo y codifica exactamente una vez en la frontera final.
  • 3La cuestión de + frente a %20 depende de dónde estés. En la parte de ruta de una URL, + es un signo más literal y el espacio debe ser %20. En cadenas de consulta, muchos servidores tratan + como espacio, siguiendo las viejas convenciones de formularios. %20 es la opción segura en todas partes; + solo es seguro si conoces el comportamiento del servidor.
  • 4Los caracteres reservados solo lo son en su propia posición. Una / en la ruta es estructura; una / en el valor de una consulta es solo datos y debe codificarse. El mismo carácter puede ser legal en una parte de la URL y requerir codificación en otra: por eso falla el consejo genérico de «codifica la URL».
  • 5Vigila la codificación al depurar cadenas de redirección y callbacks. Los flujos OAuth y los callbacks de pago pasan URL completas como parámetros de otras URL, lo que exige codificación anidada. Cada capa debe codificarse una vez: un redirect_uri que pierde misteriosamente sus parámetros es casi siempre un bug de profundidad de codificación.

Preguntas frecuentes

¿Cuál es la diferencia entre encodeURI y encodeURIComponent?

encodeURIComponent escapa todo lo que tiene significado especial, incluidos &, =, ?, / y :, lo que la hace correcta para codificar un valor único que va dentro de una URL. encodeURI preserva esos caracteres estructurales, lo que la hace correcta para limpiar una URL completa sin destruirla. Regla práctica: construyendo un parámetro de consulta, encodeURIComponent; arreglando espacios en una URL completa, encodeURI.

¿Por qué los espacios aparecen a veces como + y a veces como %20?

Dos historias distintas. La codificación porcentual dice que el espacio es %20. Pero el envío de formularios HTML, definido por separado en los inicios de la web, codificaba los espacios como + en los datos de formulario, y esa convención se filtró a las cadenas de consulta. La mayoría de los servidores aceptan ambos en consultas; solo %20 es válido en rutas. Al generar URL tú mismo, usa siempre %20 y codifica cualquier + literal como %2B, y nunca toparás con la ambigüedad.

¿Por qué mi texto no inglés se convierte en tantos códigos %?

Porque la codificación opera sobre bytes UTF-8, no caracteres. Una letra latina acentuada ocupa dos bytes, así que dos escapes; los caracteres árabes y CJK ocupan de dos a tres bytes cada uno; los emoji, cuatro. La URL sigue funcionando —los navegadores la decodifican de vuelta—, pero la cadena es mucho más larga. Los navegadores modernos suelen mostrar los caracteres decodificados en la barra de direcciones mientras envían la forma codificada por la red.

¿Qué es la doble codificación y cómo la arreglo?

Es codificar texto que ya estaba codificado: %20 se convierte en %2520, porque el propio % se escapa a %25. El síntoma es %20 o %25 literal apareciendo donde debería haber un espacio. Ocurre cuando varias capas codifican cada una a la defensiva. El arreglo es arquitectónico: decodifica en la frontera de entrada, trabaja con cadenas planas internamente y codifica exactamente una vez en la frontera de salida.

¿Se envían mis datos a algún sitio?

No. La codificación y la decodificación corren enteramente en tu navegador con JavaScript: nada se transmite, registra ni almacena. Puedes confirmarlo desconectándote de internet; la herramienta sigue funcionando porque no hay servidor implicado. Esto importa cuando depuras URL que contienen tokens o identificadores de sesión.