Apply your JS skills to key Mozilla projects as an MDN Fellow! http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    encodeURIComponent()

    Résumé

    La méthode encodeURIComponent() permet d'encoder un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatres séquences d'échappement UTF-8 correspondantes (quatre séquences seront utilisées uniquement lorsque les caractères à encoder sont composés de deux caractères « surrogate »).

    Syntaxe

    encodeURIComponent(str);

    Paramètres

    str
    Une chaîne de caractères qui correspond à un composant d'URI.

    Description

    encodeURIComponent() échappe tous les caractères sauf : les lettres de l'alphabet latin, les chiffres (arabes) et - _ . ! ~ * ' ( )

    Un exception URIError sera levée lorsqu'on utilise cette fonction sur un unique demi-codet qui est censé faire partie d'une paire de demi-codets :

    // la paire de demi-codets : OK
    console.log(encodeURIComponent('\uD800\uDFFF'));
    
    // seul le demi-codet supérieur : "URIError: malformed URI sequence"
    console.log(encodeURIComponent('\uD800'));
    
    // seul le demi-codet inférieur : "URIError: malformed URI sequence"
    console.log(encodeURIComponent('\uDFFF')); 
    

    Afin d'éviter des requêtes inattendues vers le serveur, il est conseillé d'utiliser la fonction encodeURIComponent() pour n'importe quel paramètre qui aurait été saisi par l'utilisateur et qui ferait partie d'un URI. Ainsi, si un utilisateur peut saisir "Thym &access=admin" dans une variable commentaire et qu'on n'utilise pas encodeURIComponent(), on obtiendra la chaîne commentaire=Thym%20&access=admin. On voit ici que l'esperluette (&) et le signe égal forment une nouvelle paire clé/valeur. Au lieu d'avoir une clé POST commentaire égale à "Thym &access=admin", on aura deux clés POST, l'une égale à "Thym " et une seconde (access) égale à admin.

    Pour application/x-www-form-urlencoded, les espaces sont remplacés par un '+', aussi, dans ce cas, on pourra ajouter un remplacement supplémentaire après encodeURIComponent() pour remplacer "%20" par "+".

    Pour utiliser une fonction qui respecte la RFC 3986, plus stricte (qui réserve les caractères !, ', (, ), et * même si ces caractères n'ont pas d'usage normalisé), on pourra utiliser la fonction suivante :

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

    Exemples

    Dans l'exemple qui suit, on utilise une méthode spéciale pour l'encodage afin d'utiliser les paramètres d'en-tête de réponse Content-Disposition et Link (pour, par exemple, représenter des noms de fichiers en UTF-8) :

    var nomFichier = 'mon fichier(2).txt';
    var header = "Content-Disposition: attachment; filename*=UTF-8''" 
                 + encodeRFC5987ValueChars(nomFichier);
    
    console.log(header); 
    // affiche "Content-Disposition: attachment; filename*=UTF-8''mon%20fichier%282%29.txt"
    
    
    function encodeRFC5987ValueChars (str) {
        return encodeURIComponent(str).
            // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
            // il faut donc l'échapper
            replace(/['()]/g, escape). // c'est-à-dire %27 %28 %29
            replace(/\*/g, '%2A').
                // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis  
                // on peut donc bénéficier d'un peu plus de lisibilité : |`^
                replace(/%(?:7C|60|5E)/g, unescape);
    }
    

    Spécifications

    Spécification Statut Commentaires
    Troisième édition d'ECMAScript. Standard Définition initiale.
    ECMAScript 5.1 (ECMA-262)
    La définition de 'encodeURIComponent' dans cette spécification.
    Standard  
    ECMAScript 6 (ECMA-262)
    La définition de 'encodeURIComponent' dans cette spécification.
    Draft  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui)
    Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)

    Voir aussi

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: BenoitL, Jeremie, SphinxKnight, teoli, Mgjbot
    Dernière mise à jour par : SphinxKnight,
    Masquer la barre latérale