JavaScript | encodeURI(), decodeURI() y sus funciones componentes

La codificación y decodificación de URI y componentes de URI es una tarea habitual en el desarrollo web al realizar una solicitud GET a la API con parámetros de consulta. Muchas veces construye una string de URL con parámetros de consulta y, para comprenderla, el servidor de respuesta necesita decodificar esta URL. Los navegadores codifican automáticamente la URL, es decir, convierte algunos caracteres especiales en otros caracteres reservados y luego realiza la solicitud. Por ejemplo: el carácter de espacio ” ” se convierte en + o %20.

Ejemplo:

• Abra www.google.com y escriba una consulta de búsqueda «geeks for geeks».
• Después de que aparezcan los resultados de la búsqueda, observe la barra de URL del navegador. La URL del navegador consistirá en %20 o signo + en lugar de espacio.
• La URL se mostrará como: https://www.google.com/search?q=geeks%20for%20geeks o https://www.google.com/search?q=geeks+for+geeks

Nota: El navegador convirtió los espacios en el signo + o %20 automáticamente.

Hay muchos otros caracteres especiales y convertir cada uno de ellos por código duro será tedioso. JavaScript proporciona las siguientes funciones para realizar esta tarea:

codificarURI()

La función encodeURI() se utiliza para codificar el URI completo. Esta función codifica el carácter especial excepto (, /? : @ & = + $#) caracteres.

Sintaxis:

encodeURI( complete_uri_string )

Parámetros: esta función acepta un único parámetro complete_uri_string que se utiliza para contener la URL que se va a codificar.

Valor de retorno: esta función devuelve el URI codificado.

Ejemplo:

<script>
const url = "https://www.google.com/search?q=geeks for geeks";
const encodedURL = encodeURI(url);
document.write(encodedURL)
</script>

Producción:

https://www.google.com/search?q=geeks%20for%20geeks

encodeURIComponent()

La función encodeURIComponent() se usa para codificar algunas partes o componentes de URI. Esta función codifica los caracteres especiales. Además, codifica los siguientes caracteres: , /? : @ & = + $#

Sintaxis:

encodeURIComponent( uri_string_component )

Parámetros: Esta función acepta un solo parámetro uri_string_component que se utiliza para contener la string que debe codificarse.

Valor de retorno: esta función devuelve la string codificada.

Ejemplo:

<script>
const component = "geeks for geeks"
const encodedComponent = encodeURIComponent(component);
document.write(encodedComponent)
</script>

Producción:

geeks%20for%20geeks

decodificarURI()

La función decodeURI() se usa para decodificar el URI generado por encodeURI().

Sintaxis:

decodeURI( complete_encoded_uri_string )

Parámetros: esta función acepta un solo parámetro complete_encoded_uri_string que contiene la string codificada.

Valor de retorno: esta función devuelve la string decodificada (string original).

Ejemplo:

<script>
const url = "https://www.google.com/search?q=geeks%20for%20geeks";
const decodedURL = decodeURI(url);
document.write(decodedURL)
</script>

Producción:

https://www.google.com/search?q=geeks for geeks

decodificarURIComponent()

La función decodeURIComponent() se usa para decodificar algunas partes o componentes del URI generado por encodeURIComponent().

Sintaxis:

decodeURIComponent( encoded_uri_string_component )

Parámetros: esta función acepta un solo parámetro encoded_uri_string_component que contiene la string codificada.

Valor de retorno: esta función devuelve el componente decodificado de la string URI.

Ejemplo:

<script>
const component = "geeks%20for%20geeks"
const decodedComponent = decodeURIComponent(component);
document.write(decodedComponent)                    
</script>

Producción:

geeks for geeks

Aplicaciones:

• Para convertir correctamente los parámetros de consulta separados por espacios proporcionados a la API.
• En web scraping para decodificar los parámetros de consulta de URL para extraer strings legibles por humanos.