Codifica y decodifica caracteres especiales en URLs al instante
También podrías necesitar
El percent-encoding (también llamado URL encoding) es el mecanismo estándar definido en el RFC 3986 para representar caracteres no seguros en URLs como secuencias de bytes hexadecimales precedidas por %. Caracteres como espacios, acentos, la ñ, emojis o símbolos especiales (`&`, `=`, `#`, `?`) deben codificarse para que los servidores web los interpreten correctamente. JavaScript expone dos funciones distintas para esto: `encodeURIComponent()` codifica todo excepto los caracteres no reservados (A–Z a–z 0–9 - _ . ! ~ * ' ( )) y es la indicada para codificar valores individuales dentro de una query string; `encodeURI()` preserva los delimitadores de la URL (/, :, ?, #, &, =) y está pensada para codificar una URL completa sin romper su estructura. Esta distinción importa en casos como OAuth: el parámetro `redirect_uri` en una URL de autorización debe codificarse con `encodeURIComponent()` — si usás `encodeURI()`, los `://` y las `/` de la URL destino quedan sin codificar y algunos servidores de autorización los rechazarán. Esta herramienta procesa el texto completo en tu navegador en tiempo real — ningún dato sale de tu dispositivo.
¿Cuál es la diferencia entre encodeURIComponent y encodeURI?
encodeURIComponent codifica todos los caracteres excepto A–Z a–z 0–9 - _ . ! ~ * ' ( ). Es el indicado para valores individuales dentro de una query string. encodeURI, en cambio, preserva los delimitadores de la URL (/, :, ?, #, &, =) y está pensado para codificar una URL completa sin romper su estructura.
¿Por qué un espacio se convierte en %20 y no en +?
El estándar RFC 3986 especifica %20 para los espacios en URLs. El símbolo + como sustituto del espacio es una convención de application/x-www-form-urlencoded (formularios HTML), no de URLs generales. Algunos servidores aceptan ambos, pero %20 es el valor correcto según el estándar.
¿Qué es el percent-encoding y cómo funciona?
Percent-encoding representa cada byte del carácter como %XX, donde XX son los dos dígitos hexadecimales del valor del byte. Para caracteres UTF-8 multibyte (como ñ o emojis), se generan múltiples secuencias %XX consecutivas. Por ejemplo, 'ñ' en UTF-8 son los bytes 0xC3 0xB1, que se codifican como %C3%B1.
¿Cuándo debo usar URL encoding?
Siempre que construyas URLs dinámicamente con datos del usuario: parámetros de búsqueda, tokens, nombres de archivo, valores de formulario enviados como query string, redirecciones con URLs embebidas, o cualquier dato que pueda contener caracteres fuera del conjunto ASCII básico seguro.
¿Por qué aparece un error al decodificar?
El error ocurre cuando la cadena contiene secuencias de percent-encoding malformadas: un % que no está seguido de exactamente dos dígitos hexadecimales válidos (0–9, A–F). Ejemplos inválidos: %GG, %2, % solo. También puede ocurrir si el texto fue cortado en medio de una secuencia multibyte UTF-8.
¿Por qué debo codificar la `redirect_uri` en OAuth con encodeURIComponent?
En un flujo OAuth, el parámetro `redirect_uri` es una URL que se envía como valor dentro de otra URL: `https://auth.servidor.com/authorize?redirect_uri=https://miapp.com/callback`. Si la URL destino contiene `://` o `/` sin codificar, algunos servidores de autorización las interpretan como parte de la URL principal y rechazan la petición. La solución: `encodeURIComponent('https://miapp.com/callback')` → `https%3A%2F%2Fmiapp.com%2Fcallback`. Usar `encodeURI()` no es suficiente aquí porque no codifica `:` ni `/`.
¿Cuándo codificar el valor de un parámetro vs la URL completa?
La regla: usá `encodeURIComponent()` para los valores dentro de una query string, nunca para la URL completa. Si codificás la URL entera con `encodeURIComponent()`, los `/`, `:` y `?` también se escapan y la URL queda inválida. El patrón correcto al construir URLs dinámicas es codificar solo los valores: `const url = \`https://api.com/search?q=\${encodeURIComponent(query)}&lang=\${encodeURIComponent(lang)}\``.