En resumen: la codificación de URL (percent-encoding) sustituye los caracteres inseguros por secuencias %XX para que los enlaces sobrevivan a espacios, acentos y símbolos. Un espacio se convierte en %20, un ampersand en %26. La clave es saber cuándo codificar una URL entera frente a un solo valor de consulta — y que encodeURIComponent y encodeURI no son intercambiables.

Una URL solo puede contener con seguridad un conjunto limitado de caracteres. Todo lo demás — espacios, letras acentuadas y símbolos reservados como ?, &, # y = — debe ir percent-encoded, o el enlace se rompe o apunta a un lugar inesperado.

Qué hace realmente el percent-encoding

Cada carácter inseguro se sustituye por un signo de porcentaje seguido de su valor de byte hexadecimal. Un espacio es %20, un ampersand %26, un signo de interrogación %3F. La decodificación invierte el proceso, devolviendo cada %XX válido al carácter original.

%20 frente a + para los espacios

Ambos pueden significar «espacio», pero no en el mismo sitio. %20 es el espacio percent-encoded usado en toda la ruta y la consulta de una URL. El signo más + significa espacio solo en el contexto application/x-www-form-urlencoded — envíos de formulario y cadenas de consulta — y en otros lugares se trata literalmente. Ante la duda, %20 es la opción más segura y universal.

encodeURIComponent frente a encodeURI

Es la distinción que confunde. Usa encodeURIComponent para un valor único que insertas en una URL — por ejemplo el término de búsqueda en ?q=hello%20world. Codifica caracteres reservados como & y = para que no se confundan con la estructura de la URL. Usa encodeURI solo en una URL completa, donde esos caracteres reservados deben conservar su significado estructural. Codificar una URL entera con encodeURIComponent estropearía sus propios :// y ?; codificar un solo parámetro con encodeURI deja sin escapar caracteres peligrosos.

Cuándo codificar

  • Al construir una cadena de consulta a partir de entradas de usuario (términos de búsqueda, filtros, nombres).
  • Al poner un enlace dentro de otro como parámetro ?redirect= o ?url=.
  • Al manejar nombres de archivo o rutas que contienen espacios o acentos.
  • Al depurar un enlace que funciona en local pero se rompe al compartirlo.

La codificación de URL no es Base64

Resuelven problemas distintos. El percent-encoding hace seguros los caracteres inseguros dentro de una URL; el Base64 recodifica datos binarios en una cadena ASCII compacta, y su salida todavía necesita codificación de URL si va en un enlace. Elegir el equivocado produce enlaces que parecen codificados pero no funcionan.

Un flujo práctico

Pega el valor en bruto en el Codificador / Decodificador de URL para codificar un parámetro o decodificar una cadena %XX sospechosa — decodifica las secuencias válidas y señala las inválidas en lugar de corromperlas en silencio. Si el mismo contenido pasa también por Base64, compruébalo con el Codificador / Decodificador Base64 para aplicar los dos pasos en el orden correcto.

Errores comunes que evitar

  • Codificar una URL completa con encodeURIComponent y romper su estructura.
  • Suponer que + significa espacio en cualquier parte de una URL.
  • Doble codificación — volver a pasar por el codificador una cadena ya codificada.
  • Confundir el percent-encoding con el Base64.

Codifica las partes, no el todo, y un enlace con espacios, acentos o una URL anidada viajará intacto.