Codificador URL

encodeURIComponent/decodeURIComponent en el navegador para query strings y APIs.

{{ url.message }}

Descripción

Las URL fueron inventadas por Tim Berners-Lee en 1991, junto con HTML y HTTP, como parte del proyecto que se convertiría en la World Wide Web. El formato que usamos hoy — ese `https://ejemplo.com/pagina?parametro=valor&otro=123` — fue formalizado en el RFC 1738 en 1994 y refinado hasta el RFC 3986 en 2005. Existe una tensión intrínseca en el diseño original: las URL deben transmitirse como texto ASCII puro, pero el mundo se comunica en cientos de idiomas con acentos, caracteres especiales y alfabetos completamente distintos al latino. La solución fue el percent-encoding: cualquier byte que no sea un carácter ASCII seguro se representa como `%` seguido de dos dígitos hexadecimales. La letra `ã` en UTF-8, por ejemplo, ocupa dos bytes — 0xC3 y 0xA3 — y se convierte en `%C3%A3`.

La parte que casi todo desarrollador aprende a la mala es la diferencia entre `encodeURIComponent` y `encodeURI`. La función `encodeURI` preserva los caracteres estructuralmente significativos de una URL — `/`, `?`, `#`, `&`, `=` — porque fue diseñada para codificar una URL completa. `encodeURIComponent`, en cambio, también codifica esos caracteres, porque fue diseñada para codificar un valor dentro de la URL, donde `/`, `?` y `&` no pueden aparecer sin escapar. Cuando construyes una query string manualmente concatenando texto, cualquier valor que contenga `&`, `=`, `+` o `#` romperá silenciosamente el parseo en el servidor. Esto ocurre con mucha más frecuencia de lo que debería, especialmente con nombres que contienen apóstrofes, espacios o — la campeona indiscutible de los bugs de encoding — la `@` en direcciones de correo pasadas como parámetro.

Un riesgo importante al trabajar con codificación de URL es el double encoding — codificar algo que ya está codificado. Si recibes una URL que ya contiene `%20` y la pasas por `encodeURIComponent`, el `%` se convierte en `%25` y el resultado final es `%2520`, que el servidor interpretará como la cadena literal `%20` en vez de un espacio. Otro punto que genera confusión es la diferencia entre `%20` y `+` para representar espacios: los formularios HTML usan `+` en el formato `application/x-www-form-urlencoded`, pero el RFC 3986 especifica `%20`. La mayoría de los servidores acepta ambos, pero en contextos como la firma de peticiones a APIs — AWS, por ejemplo — la diferencia es crítica y puede generar errores de autenticación notoriamente difíciles de depurar.

Detalle técnico

Ideas claras antes de usar la herramienta

  • ¿Para qué sirve esta herramienta?: Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
  • ¿Se envían mis datos a algún servidor?: El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
  • ¿Puedo usarlo con datos reales en producción?: Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.

Fragmento corto para probar

  • Debajo aparece también el ejemplo largo en "Fragmentos de Código"; pega esta versión corta: Query — nome=João Silva → nome=Jo%C3%A3o%20Silva

Guía de la herramienta

  • Qué es la codificación URL (percent-encoding) Los caracteres reservados o no ASCII en URLs se escriben como % más dos dígitos hex (p. ej. espacio como %20). Las query strings lo necesitan para no romper el análisis.

  • Qué hace la herramienta Aplica encodeURIComponent / decodeURIComponent al texto.

  • Por qué usarla Construir enlaces con nombres acentuados, depurar redirecciones, probar integraciones con parámetros especiales.

Fragmentos de Código

Ejemplo de código
nome=João Silva → nome=Jo%C3%A3o%20Silva

Query

nome=João Silva → nome=Jo%C3%A3o%20Silva

Preguntas frecuentes

¿Para qué sirve esta herramienta?

Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.

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

El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.

¿Puedo usarlo con datos reales en producción?

Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.