¿Cómo codificar y decodificar una URL en JavaScript?

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:
Codificación de una URL: la codificación en Javascript se puede lograr usando

• función codificarURI
• Escapar()

1. Función encodeURI: 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.

<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 el único 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.

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

Producción:

geeks%20for%20geeks

Diferencia encodeURIComponente y encodeURI:

2. Función escape(): Esta función toma una string como único parámetro y codifica la string que se puede transmitir a través de la red informática que admite caracteres ASCII. La codificación es el proceso de convertir texto sin formato en texto cifrado.

Sintaxis:

escape( string )

Parámetros: Esta función acepta un único parámetro:

Valor devuelto: Devuelve una string codificada.

Nota: La función escape() solo codifica los caracteres especiales, esta función está obsoleta.

Excepciones: @ – + . / * _

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

Producción:

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks

Decodificación de una URL: la decodificación en Javascript se puede lograr usando

• función decodificarURI().
• función unescape().

1. Función decodeURI: La función decodeURI() se usa para decodificar 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 utiliza 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

Diferencia decodeURIComponent y decodeURI:

2. Función unescape(): Esta función toma una string como único parámetro y la usa para decodificar esa string codificada por la función escape(). La secuencia hexadecimal en la string se reemplaza por los caracteres que representan cuando se decodifican mediante la función unescape().

Sintaxis:

unescape(string)

Parámetros: Esta función acepta un único parámetro:

• string : este parámetro contiene la string que se decodificará.

Valor devuelto: Devuelve una string decodificada.

Nota: Esta función solo decodifica los caracteres especiales, esta función está obsoleta.

Excepciones: @ – + . / * _

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

Producción:

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks
https://www.google.com/search?q=geeks for geeks
https://www.google.com/search?q=geeks for geeks