La codificació i descodificació d'URL en JavaScript és essencial per al desenvolupament web, especialment quan es fan sol·licituds GET amb paràmetres de consulta. Aquest procés garanteix que els caràcters especials dels URL siguin interpretats correctament pel servidor. Per exemple, els espais es converteixen a %20 o + als URL. Aquesta guia tracta sobre com utilitzar funcions de JavaScript com encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() i unescape() per a una codificació i descodificació eficaç d'URL.

Exemple:

• Obriu www.google.com i escriviu una consulta de cerca geeks per a geeks.
• Un cop apareguin els resultats de la cerca, observeu la barra d'URL del navegador. L'URL del navegador constarà de %20 o signe + en lloc d'espai.
• L'URL es mostrarà com: https://www.google.com/search?q=geeks%20for%20geeks o https://www.google.com/search?q=geeks+for+geeks

Nota : el navegador va convertir els espais en signes + o %20 automàticament.

Codificació d'un URL: La codificació en Javascript es pot aconseguir mitjançant:

Taula de contingut

• 1. JavaScript encodeURI Funció
• 2. JavaScript encodeURIComponent() Funció
• 3. Funció escape() de JavaScript
• 1. Funció JavaScript decodeURI().
• 2. JavaScript decodeURIComponent() Funció
• 3. Funció JavaScript unescape().
• 4. Mòdul JavaScript querystring

1. JavaScript encodeURI Funció

El funció encodeURI(). s'utilitza per codificar l'URI complet. Aquesta funció codifica el caràcter especial excepte els caràcters (, / ?: @ & = + $ #).

Sintaxi:

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. JavaScript encodeURIComponent() Funció

El funció encodeURIComponent(). s'utilitza per codificar algunes parts o components de l'URI. Aquesta funció codifica els caràcters especials. A més, codifica els caràcters següents: , / ? : @ & = + $ #

Sintaxi:

encodeURIComponent( uri_string_component );>

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

geeks%20for%20geeks>

3. Funció escape() de JavaScript

Funció escape() de JavaScript pren una cadena com a paràmetre únic i codifica la cadena que es pot transmetre a través de la xarxa informàtica que admet caràcters ASCII. La codificació és el procés de conversió de text senzill en text xifrat.

Sintaxi:

escape( string )>

Nota: La funció escape() només codifica els caràcters especials, aquesta funció està obsoleta.

Excepcions: @ – + . / * _

algorisme de cabina

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>

Descodificació d'un URL

La descodificació en Javascript es pot aconseguir mitjançant

1. Funció JavaScript decodeURI().

El funció decodeURI(). s'utilitza per descodificar l'URI generat per encodeURI() .

Sintaxi:

decodeURI( complete_encoded_uri_string )>

Exemple : Aquest exemple descriu el funció decodeURI(). 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. JavaScript decodeURIComponent() Funció

El funció decodeURIComponent(). s'utilitza per descodificar algunes parts o components de l'URI generats per encodeURIComponent().

Sintaxi:

decodeURIComponent( encoded_uri_string_component )>

Exemple : Aquest exemple descriu el decodeURIComponent() de Javascript.

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

geeks for geeks>

3. Funció JavaScript unescape().

Aquesta funció pren una cadena com a paràmetre únic i l'utilitza per descodificar aquesta cadena codificada per la funció escape(). La seqüència hexadecimal de la cadena se substitueix pels caràcters que representen quan es descodifiquen mitjançant funció unescape().

Sintaxi:

unescape(string)>

Nota: Aquesta funció només descodifica els caràcters especials, aquesta funció està obsoleta.

Excepcions: @ – + . / * _

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òdul JavaScript querystring

El mòdul querystring proporciona utilitats per analitzar i formatar les cadenes de consulta d'URL. Es pot utilitzar per codificar i descodificar components d'URL.

Codificació d'un URL:

Per codificar un URL, podem utilitzar la funció querystring.stringify() per crear una cadena de consulta a partir d'un objecte i després utilitzar encodeURIComponent() per codificar la cadena resultant.

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);>

Sortida:

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

Descodificació d'un URL:

Per descodificar un URL, podem utilitzar la funció querystring.parse() per analitzar la cadena de consulta en un objecte i després accedir als valors descodificats.

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>

Diferència decodeURIComponent i decodeURI:

La codificació i descodificació d'URL en JavaScript és crucial per al desenvolupament web perfecte. Mitjançant l'ús de funcions com ara encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() i unescape(), els desenvolupadors poden assegurar-se que els seus URL estiguin formatats correctament i llegibles pels servidors. Aquesta habilitat és essencial per gestionar els paràmetres de consulta a les sol·licituds GET i garanteix una experiència d'usuari fluida al vostre lloc web.