encodeURIComponent()

Sommario

La funzione encodeURIComponent() codifica un componente di un URI sostituendo alcuni specifici caratteri con una, due, tre o quattro sequenze di escape, che rappresentano il carattere codificato in UTF-8 (le sequenze di quattro caratteri di escape verrano solo create per i caratteri composti da due caratteri "surrogati").

Sintassi

encodeURIComponent(uriComponent);

Parametri

uriComponent
Una parte di un URI

Descrizione

encodeURIComponent sostituisce tutti i caratteri esclusi i seguenti: lettere, cifre, - _ . ! ~ * ' ( )

Se si tenta di codificare un surrogato che non è parte di una coppia, verrà generato un URIError.

// Coppia surrogata: Ok
encodeURIComponent("\uD800\uDFFF");

// Solo il primo carattere surrogato:
// Viene generato un "URIError: malformed URI sequence"
encodeURIComponent("\uD800");

// Solo il secondo carattere surrogato:
// Viene generato un "URIError: malformed URI sequence"
encodeURIComponent("\uDFFF");

Per evitare problemi inaspettati durante le richieste al server, bisognerebbe richiamare encodeURIComponent su ogni dato inserito dall'utente che verrà passato come parte di un URI. Per esempio, un un utente potrebbe digitare "Cani&Gatti = animali". Senza utilizzare la funzione encodeURIComponent, la richiesta verrebbe costruita in modo simile a "commento=Cani&Gatti%20=%20animali". Notare che sono due variabili separate: "commento" e "Gatti%20". Utilizzando quuesta funzione verrebbe invece costruita come "commento=Cani%26Gatti%20%3D%20animali​".

Utilizzando application/x-www-form-urlencoded, gli spazi devono essere sostituiti da un "+"., quindi si potrebbe usare la funzione encodeURIComponent seguita da un altra sostituzione da "%20" a "+".

Per aderire con più precisione allo standard RFC 3986 (secondo il quale !'() e * sono caratteri riservati), si può usare la seguente funzione:

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

Esempi

Il seguente esempio fornisce un metodo per codificare come richiesto dall'header Content-Disposition:

var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''" 
             + encodeRFC5987ValueChars(fileName);

console.log(header); 
// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"


function encodeRFC5987ValueChars (str) {
    return encodeURIComponent(str).
        // Notare che anche se per l'RFC3986 "!" è riservato, non lo è per
        // l' RFC5987, quindi non viene sostituito
        replace(/['()]/g, escape). // i.e., %27 %28 %29
        replace(/\*/g, '%2A').
            // Per l'RFC5987 questi caratteri non necessitano di essere codificati, 
            // quindi possiamo consentire un po' più di leggibilità: |`^
            replace(/%(?:7C|60|5E)/g, unescape);
}

Specifiche

Specifica Stato Commenti
ECMAScript 3rd Edition. Standard Definizione iniziale.
ECMAScript 5.1 (ECMA-262)
The definition of 'encodeURIComponent' in that specification.
Standard  
ECMAScript 6 (ECMA-262)
The definition of 'encodeURIComponent' in that specification.
Release Candidate  

Compatibilità con i browser

Funzionalità Chrome Firefox (Gecko) Internet Explorer Opera Safari
Supporto di base (Yes) (Yes) (Yes) (Yes) (Yes)
Funzionalità Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Supporto di base (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Vedi anche

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: nicolo-ribaudo
 Ultima modifica di: nicolo-ribaudo,