encodeURI frente a encodeURIComponent

JavaScript expone dos funciones globales con nombres casi idénticos pero conjuntos distintos de caracteres que dejan sin escapar. Ambas apuntan a texto URI, pero asumen ámbitos de datos diferentes.

encodeURIComponent codifica «un solo componente»

Úsala para valores de query, segmentos de path, identificadores de fragmento y cualquier cadena que no deba inyectar estructura:

encodeURIComponent("a/b?c=1&d=2");
// "a%2Fb%3Fc%3D1%26d%3D2"

Observa que /, ?, & y = se convierten en escapes porcentuales para que el valor permanezca opaco cuando se incrusta.

Patrón típico al construir una query string manualmente:

const q = new URLSearchParams({
  title: "Q&A / Notes",
  next: "https://example.com/a?x=1",
});
q.toString(); // title=Q%26A+%2F+Notes&next=https%3A%2F%2Fexample.com%2Fa%3Fx%3D1
// (Note: URLSearchParams uses application/x-www-form-urlencoded rules; + for space)

Para cadenas montadas a mano, prefiere URLSearchParams o bibliotecas que ya gestionen los caracteres separadores.

encodeURI preserva los delimitadores URI

encodeURI asume que pasas una URI casi completa y solo necesitas corregir caracteres ilegales a nivel global manteniendo la puntuación estructural con significado:

encodeURI("https://example.com/résumé?id=1#top");
// https://example.com/r%C3%A9sum%C3%A9?id=1#top

No codifica caracteres como ?, # o / cuando aparecen — porque cree que pueden ser delimitadores reales. Eso es peligroso si tu «dato» incluye esos símbolos.

encodeURI("https://example.com/search?q=a/b");
// leaves the slash—may break server expectations if / was data, not a path separator

Regla práctica: no uses encodeURI para proteger texto arbitrario de usuario; usa encodeURIComponent (o APIs de nivel superior) por componente.

Guía rápida de decisión

Situación	Helper preferido
Un segmento de path que contiene / como dato	encodeURIComponent en cada segmento
URL completa del usuario con delimitadores desconocidos	Analizar con URL, luego codificar cada parte
URI ya estructuralmente correcta, solo fallan acentos	Posiblemente encodeURI — a menudo sigue siendo más claro normalizar host/path por separado
Construcción repetida de APIs	Preferir URL + URLSearchParams, no concatenación

decodeURI frente a decodeURIComponent

Se aplican las mismas precauciones simétricas:

decodeURIComponent("100%2525"); // may yield "100%25" if only one decoding pass—but mind double-encoding bugs upstream
decodeURI("http://host/%7Euser") → keeps delimiters untouched while decoding escapes in other positions

Si mezclas ámbitos de codificación/decodificación, el texto decodificado puede reintroducir separadores (&, ?) que cambian cómo se analizan los parámetros — trampas clásicas de open redirect o bypass de filtros cuando se reflejan en HTML o cabeceras.

Prueba distintos ámbitos de codificación en el Codificador / Decodificador URL antes de depurar redirects o callbacks OAuth.