MICHELEPISANI.IT
 

Nell'articolo è presente un tool online per convertire gli URL

Encode/Decode URL con due Funzioni in Javascript

December 19
07:322016

La codifica degli indirizzi web (URL) e la relativa decodifica sono operazioni effettuate frequentemente da chi lavora con gli script che interessano le pagine web e in particolare per invocare il metodo GET verso una destinazione al fine di passare informazioni in querystring.
Talvolta tali operazioni avvengono automaticamente durante i passaggi delle nostre lavorazioni e pertanto non viene dato peso all'operazione, questo dipende se si fa uso di particolari librerie o di altre porzioni di codice che prevendono appunto la codifica/decodifica degli URL.

Spesso però, in particolar modo quando si creano script da 0 in Javascript puro, nasce l'esigenza di effettuare "manualmente" l'operazione. Quello che serve è, in breve, convertire l'URL (e a maggior ragione l'eventuale querystring) in una stringa di caratteri adatta ad essere trasmessa tramite il protocollo HTTP che comporta la sostituzione di acuni caratteri ASCII, un esempio è il carattere "spazio" che non potendo esistere nella sua forma canonica all'interno di un indirizzo web viene convertito in %20.

Fortunatamente non è necessario sapere a memoria tutti i caratteri da convertire e le relative codifiche così come non è necessario fare realmente l'operazione in modo manuale in quanto esistono in Javascript due funzioni dedicate atte allo scopo: encodeURIComponent e decodeURIComponent, rispettivamente effettuano la codifica e la decodifica dell'URL.
Di seguito riporto il codice che ho utilizzato per generare il mio semplice tool online (che potete testare subito sotto) che effettua la codifica e decodifica degli URL sfruttando le due funzioni appena presentate:

HTML:

<textarea cols="70" rows="10" id="jsurldecenconde"></textarea><br />
<input type="button" id="btnDecode" value="Decode">
<input type="button" id="btnEncode" value="Encode">

JAVASCRIPT:

document.getElementById("btnDecode").addEventListener("click", function(){
	var obj = document.getElementById('jsurldecenconde');
	var unencoded = obj.value;
	obj.value = encodeURIComponent(unencoded).replace(/'/g,"%27").replace(/"/g,"%22");
});

document.getElementById("btnEncode").addEventListener("click", function(){
var obj = document.getElementById('jsurldecenconde');
	var encoded = obj.value;
	obj.value = decodeURIComponent(encoded.replace(/+/g,  " "));
});

Il codice di cui sopra prevede, oltre all'utilizzo della funzione dedicata per l'encoding anche la sostituzione delle virgolette e degli apici in quanto la loro gestione, non essendo direttamente prevista dalle funzioni native, diventa necessaria onde evitare che si verifichino delle eccezioni in fase di esecuzione.

TOOL ONLINE PER L'ENCODE/DECODE DI UN URL
(inserisci un URL nell'area di testo e clicca su "Encode" per ottenere il risultato desiderato. Se invece hai un URL codificato che intendi decodificare, dopo averlo inserito nell'area di testo qui sotto, clicca sul tasto "Decode". Ti basterà successivamente copiare l'indirizzo elaborato ed incollarlo nel tuo script.)

Potete vericare il funzionamento del codice direttamente nel relativo JSFiddle.

Tags

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Il Canale YouTube in ITALIANO

1 VIDEO GRATIS ogni 2 settimane! ISCRIVITI!

Entra a far parte della community su Facebook

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Hai verificato se succede per tutte le pagine da un certo periodo di tempo in poi o solo su alcune?

Tecnowiz

Sono amministratore di un blog pure io... Intanto ti faccio i complimenti per questo articolo. …

Michele Pisani

Ciao Antonio, grazie per la fiducia :) In caso di più fogli è necessario inserire il codice del …

Antonio

Ciao Michele, ho acquistato il tuo libro che unitamente ai tuoi video sta diventando il mio corso …