Codificador y decodificador de URL

Qué es la codificación de URL

Las URL se restringen a un pequeño conjunto de caracteres ASCII. El RFC para la sintaxis de URL — RFC 3986 — reserva un puñado de caracteres (/, ?, #, &, =, etc.) para significado estructural, y prohíbe espacios, caracteres de control y la mayoría de bytes no-ASCII de aparecer literalmente. Codificación de URL (también llamada codificación de porcentaje) es el mecanismo de escape: cada byte prohibido se reemplaza por % seguido de su valor hex de dos dígitos.

Así que un espacio se convierte en %20, un ampersand %26, un carácter chino 世 se convierte en %E4%B8%96 (sus tres bytes UTF-8, cada uno codificado en porcentaje). El resultado es siempre ASCII-seguro.

encodeURIComponent vs encodeURI

JavaScript expone dos funciones diferentes, y no son intercambiables:

• encodeURIComponent codifica todo que no sea un carácter no reservado. Úsalo para una pieza de una URL — un valor de parámetro de consulta, un segmento de ruta, un campo de formulario.
• encodeURI preserva caracteres estructurales de URL (:/?#&=+$,) en la suposición de que le estás pasando una URL completa y ya estructurada. Úsalo cuando tienes una URL completa con contenido no-ASCII y quieres hacerla segura para transporte sin romper su estructura.

Ejemplo de elección incorrecta: si haces encodeURI("a=1&b=2"), el = y & se preservan tal cual — está bien si esa cadena es una consulta, roto si es un valor que se supone que contiene = o & literales.

Esta herramienta te da ambos, más un modo de decodificación que acepta cualquiera de los dos tipos.

La peculiaridad del +

Históricamente, los formularios HTML codifican espacios como + (este es el tipo MIME application/x-www-form-urlencoded). Los estándares URL modernos codifican espacios como %20. Ambos están en la naturaleza — cuando decodificas una cadena de consulta, debes aceptar ambos. Nuestro decodificador lo hace.

Cuando codificas, siempre emitimos %20 (el estándar moderno). No emitas + para espacios a menos que específicamente necesites compatibilidad codificada en formulario.

Ejemplos

Cuándo usarás esto

• Construir cadenas de consulta programáticamente sin un enrutador/biblioteca.
• Inspeccionar una URL codificada que alguien te pegó.
• Depuración "¿por qué mi backend ve + en lugar de espacio?"
• Generar URL canónicas en mapas de sitio y <link rel="canonical">.

Privacidad

100% en navegador vía las funciones nativas encodeURIComponent / decodeURIComponent. Sin solicitudes de red, sin registros.

Herramientas relacionadas

• Codificador Base64 — codificación diferente, a menudo encadenada con codificación de URL para transporte compacto.
• Slugify — convierte texto arbitrario en slugs de URL seguros (una operación de nivel superior que la codificación simple).

¿Cuándo debo usar encodeURIComponent vs encodeURI?

encodeURIComponent para una sola pieza (valor de consulta, segmento de ruta, campo de formulario). encodeURI para una cadena URL completa cuya estructura no quieras romper. Cuando no estés seguro, usa encodeURIComponent en cada pieza y ensambla manualmente.

¿Por qué mi valor decodificado tiene + donde deberían haber espacios?

Porque fue codificado por un codificador de formulario en lugar de un codificador de URL, y esta herramienta deliberadamente lo deja solo. Los formularios HTML codifican espacios como + bajo el tipo MIME application/x-www-form-urlencoded, pero esa convención se aplica solo dentro de una cadena de consulta codificada en formulario — en cualquier otro lugar de una URL, + es un carácter literal ordinario. Un decodificador general que silenciosamente convirtiera cada + en un espacio corrompería cualquier ruta o valor que legítimamente contenga uno.

Así que decodificar hello+world aquí devuelve hello+world, mientras que hello%20world devuelve hello world. Si tu entrada realmente es una cadena de consulta codificada en formulario, reemplaza + con %20 antes de decodificar, o con un espacio después.

¿Cómo codifico caracteres especiales en claves versus valores?

Ambos. Codifica cada clave y cada valor independientemente con encodeURIComponent, luego une con = y &. El modo "construir consulta" en esta herramienta hace exactamente eso.

¿Cuál es la longitud máxima de una URL?

La especificación no tiene límite, pero en práctica ~2.000 caracteres es el techo seguro en navegadores + servidores + proxies. Para cargas útiles más largas, usa un cuerpo POST en su lugar.

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

No. La página usa funciones nativas del navegador para todo. Abre DevTools Network — verás cero solicitudes mientras escribes.

¿Por qué café produce seis bytes cuando se codifica?

é es dos bytes en UTF-8 (0xC3 0xA9), así que se codifica en porcentaje a %C3%A9 — seis caracteres. ASCII de un solo byte como a se mantiene como un carácter.