La codifica e la decodifica degli URL in JavaScript è essenziale per lo sviluppo web, soprattutto quando si effettuano richieste GET con parametri di query. Questo processo garantisce che i caratteri speciali negli URL vengano interpretati correttamente dal server. Ad esempio, gli spazi vengono convertiti in %20 o + negli URL. Questa guida spiega come utilizzare le funzioni JavaScript come encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() e unescape() per una codifica e decodifica URL efficace.

Esempio:

• Apri www.google.com e scrivi una query di ricerca geeks for geeks.
• Una volta visualizzati i risultati della ricerca, osserva la barra degli URL del browser. L'URL del browser sarà composto da %20 o + al posto dello spazio.
• L'URL verrà visualizzato come: https://www.google.com/search?q=geeks%20for%20geeks o https://www.google.com/search?q=geeks+for+geeks

Nota : Il browser ha convertito automaticamente gli spazi nei segni + o %20.

Codifica di un URL: La codifica in Javascript può essere ottenuta utilizzando:

Tabella dei contenuti

• 1. Funzione JavaScript codificaURI
• 2. Funzione JavaScript encodeURIComponent()
• 3. Funzione JavaScript escape()
• 1. Funzione JavaScript decodeURI()
• 2. Funzione JavaScript decodeURIComponent()
• 3. Funzione JavaScript unescape()
• 4. Modulo stringa di query JavaScript

1. Funzione JavaScript codificaURI

IL codificaURI() funzione viene utilizzato per codificare l'URI completo. Questa funzione codifica il carattere speciale ad eccezione dei caratteri (, / ?: @ & = + $ #).

Sintassi:

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

IL codificaURIComponent() funzione viene utilizzato per codificare alcune parti o componenti dell'URI. Questa funzione codifica i caratteri speciali. Inoltre, codifica i seguenti caratteri: , / ? : @ & = + $ #

Sintassi:

encodeURIComponent( uri_string_component ); 

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

geeks%20for%20geeks 

3. Funzione JavaScript escape()

Funzione JavaScript escape() accetta una stringa come singolo parametro e codifica la stringa che può essere trasmessa sulla rete di computer che supporta i caratteri ASCII. La codifica è il processo di conversione del testo semplice in testo cifrato.

Sintassi:

escape( string ) 

Nota: La funzione escape() codifica solo i caratteri speciali, questa funzione è deprecata.

Eccezioni: @ – + . /*_

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 

Decodificare un URL

La decodifica in Javascript può essere ottenuta utilizzando

1. Funzione JavaScript decodeURI()

IL funzione decodificaURI() viene utilizzato per decodificare l'URI generato da codificaURI() .

Sintassi:

decodeURI( complete_encoded_uri_string ) 

Esempio : Questo esempio descrive il funzione decodificaURI() Di 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. Funzione JavaScript decodeURIComponent()

IL funzione decodificaURIComponent() viene utilizzato per decodificare alcune parti o componenti dell'URI generati da encodeURIComponent().

Sintassi:

decodeURIComponent( encoded_uri_string_component ) 

Esempio : Questo esempio descrive il decodificaURIComponent() di Javascript.

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

geeks for geeks 

3. Funzione JavaScript unescape()

Questa funzione accetta una stringa come singolo parametro e la utilizza per decodificare la stringa codificata dalla funzione escape(). La sequenza esadecimale nella stringa viene sostituita dai caratteri che rappresentano quando decodificati tramite funzione unescape().

Sintassi:

unescape(string) 

Nota: Questa funzione decodifica solo i caratteri speciali, questa funzione è deprecata.

Eccezioni: @ – + . /*_

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. Modulo stringa di query JavaScript

Il modulo querystring fornisce utilità per l'analisi e la formattazione delle stringhe di query URL. Può essere utilizzato per codificare e decodificare i componenti URL.

Codifica di un URL:

Per codificare un URL, possiamo utilizzare la funzione querystring.stringify() per creare una stringa di query da un oggetto e quindi utilizzare encodeURIComponent() per codificare la stringa risultante.

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

Produzione:

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

Decodificare un URL:

Per decodificare un URL, possiamo utilizzare la funzione querystring.parse() per analizzare la stringa di query in un oggetto e quindi accedere ai valori decodificati.

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 

Differenza decodificaURIComponente e decodeURI:

La codifica e la decodifica degli URL in JavaScript sono cruciali per uno sviluppo web senza interruzioni. Utilizzando funzioni come encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() e unescape(), gli sviluppatori possono garantire che i loro URL siano formattati correttamente e leggibili dai server. Questa competenza è essenziale per gestire i parametri di query nelle richieste GET e garantisce un'esperienza utente fluida sul tuo sito web.