Codificación de URLs en JavaScript: encodeURI() vs. encodeURIComponent()
En el desarrollo web, la manipulación de URLs es una tarea común. A menudo, necesitamos construir URLs dinámicamente, incorporando información de variables o parámetros. Sin embargo, las URLs están sujetas a ciertas restricciones en cuanto a los caracteres permitidos. Algunos caracteres especiales como espacios, signos de puntuación o caracteres no ASCII pueden causar problemas al formar una URL. Para evitar estos problemas, JavaScript ofrece dos funciones para codificar URLs: encodeURI y encodeURIComponent.
¿Qué son las URLs y URIs?
Antes de profundizar en las diferencias entre encodeURI y encodeURIComponent, es crucial comprender la diferencia entre una URL (Localizador de Recurso Uniforme) y una URI (Identificador de Recurso Uniforme).
URI es un término general que identifica un recurso en Internet. Una URL es un tipo específico de URI que especifica cómo acceder a un recurso. En otras palabras, una URL es un tipo de URI que indica la ubicación de un recurso en Internet.
¿Para qué sirve la codificación de URLs?
La codificación de URLs es necesaria para garantizar que las URLs sean válidas y puedan ser procesadas correctamente por los servidores web. Los caracteres especiales en una URL pueden ser interpretados de forma errónea por los navegadores o los servidores, lo que puede llevar a errores o comportamientos inesperados.
Por ejemplo, un espacio en blanco en una URL puede ser interpretado como un separador de parámetros, lo que puede provocar que la URL no se interprete correctamente. Para evitar estos problemas, se utilizan las funciones encodeURI y encodeURIComponent para convertir los caracteres especiales en sus equivalentes codificados.
encodeURI vs. encodeURIComponent: ¿Cuándo usar cada una?
encodeURI
La función encodeURI se utiliza para codificar una URL completa. Esta función codifica todos los caracteres especiales excepto los caracteres que se utilizan para formar la URL, como el signo de interrogación (?), el signo de numeral (#) o la barra inclinada (/).
Ejemplo:
«`javascript
const url = «https://www.example.com/search?query=javascript+encodeURI»;
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
// Output: https://www.example.com/search?query=javascript%2BencodeURI
«`
Como puedes observar, encodeURI reemplazó el espacio en blanco (+) por %2B, asegurando que la URL sea procesada correctamente.
encodeURIComponent
La función encodeURIComponent se utiliza para codificar componentes de una URL, como los parámetros o los valores de los parámetros. Esta función codifica todos los caracteres especiales, incluyendo los que se utilizan para formar la URL.
Ejemplo:
«`javascript
const query = «javascript encodeURIComponent»;
const encodedQuery = encodeURIComponent(query);
console.log(encodedQuery);
// Output: javascript%20encodeURIComponent
«`
En este caso, encodeURIComponent codificó tanto el espacio en blanco como el carácter + para asegurar que los parámetros se procesen correctamente en la URL.
Diferencias en la codificación de caracteres
La siguiente tabla resume las diferencias en la codificación de caracteres entre encodeURI y encodeURIComponent:
| Caracter | encodeURI | encodeURIComponent |
|—|—|—|
| Espacio en blanco | %20 | %20 |
| Signo de interrogación (?) | No codificado | %3F |
| Signo de numeral (#) | No codificado | %23 |
| Barra inclinada (/) | No codificado | %2F |
| Signo de más (+) | No codificado | %2B |
| Comillas dobles («) | %22 | %22 |
| Comillas simples (‘) | %27 | %27 |
Como puedes ver, encodeURIComponent codifica todos los caracteres, mientras que encodeURI omite ciertos caracteres que son necesarios para formar la URL.
Ejemplos prácticos
1. Codificar un parámetro de búsqueda
«javascripthttps://www.example.com/search?q=${encodedQuery}`;
const query = "JavaScript encodeURI example";
const encodedQuery = encodeURIComponent(query);
const url =
console.log(url);
// Output: https://www.example.com/search?q=JavaScript%20encodeURI%20example
«`
En este ejemplo, encodeURIComponent se utiliza para codificar el parámetro de búsqueda q, asegurando que el espacio en blanco se codifique correctamente para que la URL sea procesada correctamente.
2. Codificar una URL completa
«`javascript
const url = «https://www.example.com/search?query=JavaScript+encodeURI»;
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
// Output: https://www.example.com/search?query=javascript%2BencodeURI
«`
En este caso, encodeURI se utiliza para codificar la URL completa. Si bien la URL es válida, la función encodeURI asegura que sea procesada correctamente por los servidores web.
Resumen
En resumen, encodeURI se utiliza para codificar URLs completas, mientras que encodeURIComponent se utiliza para codificar componentes de una URL, como los parámetros. Al utilizar la función correcta, se asegura que las URLs sean válidas y se procesen correctamente por los servidores web.
Al codificar correctamente las URLs, se asegura que la información se transmita correctamente entre el navegador y el servidor, evitando errores y asegurando la integridad de los datos.