URL Encode y Decode

¿Que es URL encoding (percent-encoding)?

URL encoding, formalmente conocido como percent-encoding, es el mecanismo estandarizado en el RFC 3986 para representar caracteres especiales en URLs (Uniform Resource Locators) utilizando el formato %XX, donde XX es el codigo hexadecimal del byte del caracter en codificacion UTF-8. Este mecanismo existe porque la especificacion de URLs solo permite un subconjunto limitado de caracteres ASCII llamados "caracteres no reservados": las letras A-Z y a-z, los digitos 0-9, y cuatro caracteres especiales: guion (-), punto (.), guion bajo (_) y virgulilla (~). Cualquier otro caracter debe codificarse para ser incluido de forma segura en una URL.

Los caracteres reservados en URLs tienen significados especiales en la sintaxis: la barra (/) separa segmentos del path, el signo de interrogacion (?) introduce los query parameters, el ampersand (&) separa parametros, el numeral (#) indica el fragmento, el signo igual (=) asigna valores a parametros, y los dos puntos (:) separan el esquema del host y el host del puerto. Cuando necesitas incluir alguno de estos caracteres como dato (no como parte de la estructura de la URL), debes codificarlo. Por ejemplo, si un parametro de busqueda contiene el caracter &, debe codificarse como %26 para que no se interprete como separador de parametros.

encodeURI vs encodeURIComponent: cuando usar cada uno

JavaScript proporciona dos funciones nativas para codificacion de URLs que tienen propositos diferentes y es fundamental saber cuando usar cada una. La funcion encodeURI() codifica una URL completa, respetando los caracteres estructurales que forman parte de la sintaxis de URLs (como :, /, ?, #, &, =). Esto la hace adecuada para codificar una URL entera que contiene caracteres no-ASCII en el path o en los nombres de parametros, pero que necesita mantener su estructura intacta.

La funcion encodeURIComponent() codifica todo el texto excepto los caracteres no reservados (A-Z, a-z, 0-9, -, _, ., ~). Esto incluye los caracteres estructurales de URLs, lo que la hace ideal para codificar valores individuales de query parameters. Por ejemplo, si quieres pasar la URL "https://ejemplo.com" como valor de un parametro redirect_url, debes usar encodeURIComponent para que las barras y los dos puntos se codifiquen: "https%3A%2F%2Fejemplo.com".

Un error comun entre desarrolladores es usar encodeURI cuando deberian usar encodeURIComponent, o viceversa. Si codificas el valor de un parametro con encodeURI, caracteres como & o = no se codificaran y rompran la estructura de la query string. Si codificas una URL completa con encodeURIComponent, los caracteres estructurales como :// y / se codificaran y la URL dejara de ser valida. Nuestra herramienta ofrece ambos modos para que puedas seleccionar el apropiado segun tu caso de uso especifico.

Caracteres que necesitan codificacion URL y por que

Los caracteres mas frecuentemente codificados en URLs son los espacios, que se representan como %20 (o como + en el formato application/x-www-form-urlencoded usado por formularios HTML). Los caracteres acentuados del espanol requieren multiples secuencias de escape porque en UTF-8 ocupan mas de un byte: la a con tilde (a) se codifica como %C3%A1 (dos bytes), la ene se codifica como %C3%B1, y la u con dieresis como %C3%BC. Los emojis, al ocupar hasta 4 bytes en UTF-8, generan secuencias aun mas largas.

Los caracteres reservados que necesitan codificacion cuando se usan como datos incluyen: & (ampersand, %26), = (igual, %3D), + (mas, %2B), / (barra, %2F), ? (interrogacion, %3F), # (numeral, %23), % (porcentaje, %25), y @ (arroba, %40). Es especialmente importante codificar el caracter % cuando aparece como dato, ya que el navegador podria interpretarlo como el inicio de una secuencia de escape existente, causando errores de decodificacion dificiles de depurar.

URL encoding en la practica: casos de uso reales

Parametros UTM para marketing: Los enlaces UTM se usan para trackear campanas de marketing en Google Analytics. Los parametros utm_source, utm_medium y utm_campaign frecuentemente contienen texto con espacios, tildes o caracteres especiales. Por ejemplo, utm_campaign=promocion-verano-espana necesita codificarse correctamente para que Analytics interprete el parametro completo. Un error de codificacion puede hacer que los datos de la campana se fragmenten en multiples entradas en tus informes.

APIs REST y webhooks: Al construir URLs para peticiones GET a APIs, los valores de los parametros deben codificarse con encodeURIComponent. Si pasas una direccion de email como parametro (?email=usuario@ejemplo.com), el caracter @ debe codificarse como %40. Si el valor contiene ampersands o signos de igual, es critico codificarlos para que no se interpreten como delimitadores de la query string.

Redireccionamientos: Los sistemas de redireccion frecuentemente necesitan pasar la URL de destino como parametro de otra URL. La URL de destino completa (con sus propios parametros) debe codificarse con encodeURIComponent para evitar conflictos entre los parametros de la URL de redireccion y los de la URL de destino. Este es uno de los escenarios mas propensos a errores si no se codifica correctamente.

SEO y URLs amigables: Las URLs de paginas con contenido en espanol frecuentemente contienen caracteres que necesitan codificacion. Un titulo como "Guia de nutricion para ninos" genera una URL que contiene tilde en "nutricion" y ene en "ninos". Aunque los navegadores modernos muestran estos caracteres de forma legible en la barra de direcciones, internamente la URL usa codificacion percent-encoding. Es importante que tu CMS o framework genere estas URLs codificadas correctamente para evitar errores 404.

Decodificacion de logs y analytics: Los logs de servidores web y los informes de herramientas de analytics frecuentemente muestran URLs con secuencias %XX. Decodificarlas es necesario para entender que busco el usuario, que parametros envio, y que paginas visito. Nuestra herramienta permite pegar estas URLs codificadas y obtener el texto legible al instante.

¿Para quien es util el codificador de URLs?

Desarrolladores frontend y backend: Codifica y decodifica URLs al construir peticiones a APIs, generar enlaces dinamicos, manejar parametros de formularios, y depurar problemas de routing. Verifica que tus funciones de codificacion producen el resultado esperado comparandolo con la salida de nuestra herramienta.

SEOs y especialistas en marketing digital: Construye enlaces UTM correctamente codificados para campanas de Google Ads, Facebook Ads, email marketing, y cualquier canal digital. Decodifica URLs de informes de Google Analytics, Search Console, y herramientas de SEO para entender los datos originales.

Analistas de datos: Decodifica URLs de logs de servidor, informes de analytics, y exports de herramientas de BI que contienen secuencias percent-encoded. Identifica patrones de busqueda, parametros de campanas, y comportamiento de usuarios a partir de URLs codificadas.

Testers y QA: Verifica que las aplicaciones web codifican y decodifican URLs correctamente. Genera URLs con caracteres especiales para tests de integracion, pruebas de formularios, y validacion de APIs. Identifica errores de doble codificacion (cuando una URL se codifica dos veces accidentalmente).

Errores comunes en URL encoding y como evitarlos

El error mas frecuente es la doble codificacion (double encoding). Ocurre cuando una URL que ya esta codificada se codifica nuevamente, convirtiendo %20 en %2520, %26 en %2526, etc. Esto produce URLs invalidas que el servidor no puede interpretar correctamente. Para evitarlo, siempre verifica si tu texto ya contiene secuencias percent-encoded antes de codificarlo.

Otro error comun es usar encodeURI cuando se necesita encodeURIComponent (o viceversa). Como regla general: usa encodeURIComponent para codificar valores de parametros individuales, y encodeURI solo cuando necesitas codificar una URL completa que contenga caracteres no-ASCII pero cuya estructura debe mantenerse intacta.

Un tercer error es olvidar codificar el caracter + (mas). En el formato application/x-www-form-urlencoded (usado por formularios HTML), el + representa un espacio. Pero en percent-encoding estandar, + es un caracter literal que no se interpreta como espacio. Si tu valor contiene un + literal y usas el formato de formularios, el receptor lo interpretara como un espacio. Codifica + como %2B cuando necesites que se mantenga como el caracter mas.

Preguntas frecuentes

¿Cual es la diferencia entre %20 y + para representar espacios? Ambos representan un espacio, pero en contextos diferentes. %20 es la codificacion percent-encoding estandar (RFC 3986) usada en URLs generales. El + se usa solo en el formato application/x-www-form-urlencoded que emplean los formularios HTML al enviar datos por GET. En la practica, la mayoria de servidores web aceptan ambos, pero es mejor usar %20 en URLs y + solo en datos de formularios.

¿Por que la ene se codifica como %C3%B1 y no como un solo codigo? La codificacion URL trabaja a nivel de bytes, no de caracteres. En UTF-8, la ene ocupa 2 bytes (0xC3 y 0xB1), por lo que se codifica como dos secuencias percent-encoded. Los caracteres ASCII (como A-Z y 0-9) ocupan 1 byte y generan una sola secuencia. Los emojis pueden ocupar hasta 4 bytes y generar cuatro secuencias.

¿Mis datos se envian a algun servidor? No. Todo el procesamiento de codificacion y decodificacion se realiza localmente en tu navegador mediante las funciones nativas de JavaScript (encodeURI, encodeURIComponent, decodeURI, decodeURIComponent). Ningun dato se transmite a servidores externos.

¿Puedo usar esta herramienta para codificar URLs con emojis? Si. Los emojis son caracteres Unicode validos que se codifican correctamente en UTF-8. Por ejemplo, el emoji de corazon se codifica como una secuencia de cuatro bytes percent-encoded. La herramienta maneja correctamente todos los caracteres Unicode, incluyendo emojis, ideogramas CJK, y caracteres de escrituras no latinas.

¿Que pasa si intento decodificar una cadena que no esta codificada? Si la cadena no contiene secuencias percent-encoded (%XX), se devolvera sin cambios. Si contiene secuencias percent-encoded invalidas (como %ZZ, que no es hexadecimal valido), la herramienta mostrara un error indicando que la cadena contiene secuencias de escape invalidas.