Laquelle de ces deux méthodes doit être utilisée pour encoder les URL?

Cela dépend de ce que vous voulez réellement faire.

encodeURI suppose que l'entrée est un URI complet qui peut contenir des caractères qui doivent être encodés.

encodeURIComponent va tout coder avec une signification spéciale, vous l'utilisez donc pour des composants d'URI tels que

var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);

Si vous encodez une chaîne à insérer dans un composant URL (un paramètre de chaîne de requête), vous devez appeler encodeURIComponent.

Si vous encodez une URL existante, appelez encodeURI.

xkr.us a une grande discussion, avec des exemples. Pour citer leur résumé:

La méthode escape () n'encode pas le caractère + qui est interprété comme un espace côté serveur ainsi que généré par des formulaires avec des espaces dans leurs champs. En raison de cette lacune et du fait que cette fonction ne parvient pas à gérer correctement les caractères non ASCII, vous devez éviter d'utiliser escape () autant que possible. La meilleure alternative est généralement encodeURIComponent ().

escape () ne codera pas: @ * / +

L'utilisation de la méthode encodeURI () est un peu plus spécialisée que escape () dans la mesure où elle code pour les URI par opposition à la chaîne de requête, qui fait partie d'une URL. Utilisez cette méthode lorsque vous devez coder une chaîne à utiliser pour toute ressource qui utilise des URI et a besoin de certains caractères pour rester non codés. Notez que cette méthode ne code pas le caractère ', car il s'agit d'un caractère valide dans les URI.

encodeURI () ne codera pas: ~! @ # $ & * () =: /,;? + '

Enfin, la méthode encodeURIComponent () doit être utilisée dans la plupart des cas lors du codage d'un seul composant d'un URI. Cette méthode encodera certains caractères qui seraient normalement reconnus comme caractères spéciaux pour les URI, de sorte que de nombreux composants pourraient être inclus. Notez que cette méthode ne code pas le caractère ', car il s'agit d'un caractère valide dans les URI.

encodeURIComponent () ne codera pas: ~! * () '

Voici un résumé.

1. escape () ne codera pas @ * _ + -. /

   Ne l'utilise pas.

2. encodeURI () ne codera pas AZ az 0-9; , /? : @ & = + $ - _. ! ~ * '() #

   Utilisez-le lorsque votre entrée est une URL complète comme « https://searchexample.com/search?q=wiki »

3. encodeURIComponent () ne codera pas AZ az 0-9 - _. ! ~ * '() Utilisez-le lorsque votre entrée fait partie d'une URL complète, par exemple const queryStr = encodeURIComponent(someString)

encodeURIComponent (): suppose que son argument est une partie (telle que le protocole, le nom d'hôte, le chemin ou la chaîne de requête) d'un URI. Par conséquent, il échappe aux caractères de ponctuation qui sont utilisés pour séparer les portions d'un URI.

encodeURI (): est utilisé pour encoder l'url existante

Différence entre encodeURIet encodeURIComponent:

encodeURIComponent(value)est principalement utilisé pour coder les valeurs des paramètres queryString et il code tous les caractères applicables dans value. encodeURIignore le préfixe de protocole ( http://) et le nom de domaine.

Dans des cas très, très rares, lorsque vous souhaitez implémenter un encodage manuel pour encoder des caractères supplémentaires (bien qu'ils n'aient pas besoin d'être encodés dans des cas typiques) comme:, ! *alors vous pouvez utiliser:

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

( source )

D'autres réponses décrivent les objectifs. Voici les caractères que chaque fonction convertira réellement :

control = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0A\x0B\x0C\x0D\x0E\x0F'
        + '\x10\x11\x12\x13\x14\X15\x16\x17\x18\x19\x1A\x1B\x1C\x1D\x1E\x1F'
                                                                    + '\x7F'
encodeURI         (control + ' "%<>[\\]^`{|}'                             )
encodeURIComponent(control + ' "%<>[\\]^`{|}' + '#$&,:;=?' + '+/@'        )
escape            (control + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

Tous les caractères ci-dessus sont convertis en codes à pourcentage hexadécimal. Espace vers %20, pourcentage vers %25, etc. Les caractères ci-dessous passent inchangés.

Voici les caractères que les fonctions NE convertiront PAS :

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

encodeURI         (pass_thru + '#$&,:;=?' + '+/@' + "!'()~")
encodeURIComponent(pass_thru +                      "!'()~")
escape            (pass_thru +              '+/@'          )

En règle générale, utilisez encodeURIComponent. N'ayez pas peur du nom long en pensant qu'il est plus spécifique dans son utilisation, pour moi, c'est la méthode la plus couramment utilisée. Ne soyez pas non plus obligé d'utiliser encodeURI parce que vous l'avez testé et qu'il semble encoder correctement, ce n'est probablement pas ce que vous vouliez utiliser et même si votre test simple en utilisant "Fred" dans un champ de prénom a fonctionné, vous trouverez plus tard, lorsque vous utiliserez du texte plus avancé comme l'ajout d'une esperluette ou d'un hashtag, il échouera. Vous pouvez regarder les autres réponses pour les raisons pour lesquelles cela est.