Codificar y decodificar URL en JavaScript es esencial para el desarrollo web, especialmente cuando se realizan solicitudes GET con parámetros de consulta. Este proceso garantiza que el servidor interprete correctamente los caracteres especiales de las URL. Por ejemplo, los espacios se convierten a %20 o + en las URL. Esta guía cubre cómo utilizar funciones de JavaScript como encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() y unescape() para una codificación y decodificación de URL efectiva.

Ejemplo:

• Abra www.google.com y escriba una consulta de búsqueda geeks para geeks.
• Después de que aparezcan los resultados de la búsqueda, observe la barra de URL del navegador. La URL del navegador constará de %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 signos + o %20 automáticamente.

Codificando una URL: La codificación en Javascript se puede lograr usando:

Tabla de contenidos

• 1. Función JavaScript codificarURI
• 2. Función JavaScript codificarURIComponent()
• 3. Función de escape de JavaScript ()
• 1. Función decodeURI() de JavaScript
• 2. Función decodeURIComponent() de JavaScript
• 3. Función unescape() de JavaScript
• 4. Módulo de cadena de consulta de JavaScript

1. Función JavaScript codificarURI

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

Sintaxis:

encodeURI( complete_uri_string );>

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL)>

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

2. Función JavaScript codificarURIComponent()

El función codificarURIComponent() se utiliza 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 );>

const component = 'geeks for geeks'; const encodedComponent = encodeURIComponent(component); console.log(encodedComponent);>

geeks%20for%20geeks>

3. Función de escape de JavaScript ()

Función de escape de JavaScript () toma una cadena como parámetro único y codifica la cadena 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 )>

Nota: La función escape() solo codifica los caracteres especiales; esta función está en desuso.

Excepciones: @ – + . / * _

SQL seleccionar de varias tablas

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url);// encoding using encodeURI console.log(encodedURL) console.log(' ' + escape(url)); //encoding using escape>

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

Decodificando una URL

La decodificación en Javascript se puede lograr usando

1. Función decodeURI() de JavaScript

El función decodificarURI() se utiliza para decodificar el URI generado por codificarURI() .

Sintaxis:

decodeURI( complete_encoded_uri_string )>

Ejemplo : Este ejemplo describe el función decodificarURI() de JavaScript .

const url = 'https://www.google.com/search?q=geeks%20for%20geeks'; const decodedURL = decodeURI(url); console.log(decodedURL)>

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

2. Función decodeURIComponent() de JavaScript

El Función decodeURIComponent() se utiliza para decodificar algunas partes o componentes del URI generado por encodeURIComponent().

Sintaxis:

decodeURIComponent( encoded_uri_string_component )>

Ejemplo : Este ejemplo describe el decodificarURIComponente() de Javascript.

const component = 'geeks%20for%20geeks' const decodedComponent = decodeURIComponent(component); console.log(decodedComponent)>

geeks for geeks>

3. Función unescape() de JavaScript

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

Sintaxis:

unescape(string)>

Nota: Esta función solo decodifica los caracteres especiales; esta función está en desuso.

Excepciones: @ – + . / * _

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL) console.log(escape(url)); console.log(decodeURI(encodedURL)); console.log(unescape(encodedURL));>

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 ...>

4. Módulo de cadena de consulta de JavaScript

El módulo querystring proporciona utilidades para analizar y formatear cadenas de consulta de URL. Se puede utilizar para codificar y decodificar componentes de URL.

Codificando una URL:

Para codificar una URL, podemos usar la función querystring.stringify() para crear una cadena de consulta a partir de un objeto y luego usar encodeURIComponent() para codificar la cadena resultante.

const querystring = require('querystring'); const urlParams = {  q: 'geeks for geeks',  page: 1,  sort: 'desc' }; const encodedURL = 'https://www.google.com/search?' + querystring.stringify(urlParams); console.log(encodedURL);>

Producción:

https://www.google.com/search?q=geeks%20for%20geeks&page=1&sort=desc>

Decodificando una URL:

Para decodificar una URL, podemos usar la función querystring.parse() para analizar la cadena de consulta en un objeto y luego acceder a los valores decodificados.

const decodedParams = querystring.parse('q=geeks%20for%20geeks&page=1&sort=desc'); console.log(decodedParams.q); // Output: geeks for geeks console.log(decodedParams.page); // Output: 1 console.log(decodedParams.sort); // Output: desc>

Diferencia decodeURIComponent y decodeURI:

La codificación y decodificación de URL en JavaScript es crucial para un desarrollo web fluido. Al utilizar funciones como encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() y unescape(), los desarrolladores pueden asegurarse de que sus URL estén formateadas correctamente y sean legibles por los servidores. Esta habilidad es esencial para manejar los parámetros de consulta en solicitudes GET y garantiza una experiencia de usuario fluida en su sitio web.