Exemple de codage d'URL JavaScript - Comment utiliser encodeURIcomponent () et encodeURI ()

Vous pourriez penser cela encodeURIet encodeURIComponentfaire la même chose, au moins à partir de leurs noms. Et vous pourriez ne pas savoir lequel utiliser et quand.

Dans cet article, je vais démystifier la différence entre encodeURIet encodeURIComponent.

Qu'est-ce qu'un URI et en quoi est-il différent d'une URL?

URI signifie Uniform Resource Identifier.

URL signifie Uniform Resource Locator.

Tout ce qui identifie de manière unique une ressource est son URI, tel que son identifiant, son nom ou son numéro ISBN. Une URL spécifie une ressource et comment elle est accessible (le protocole). Toutes les URL sont des URI, mais tous les URI ne sont pas des URL.

Pourquoi avons-nous besoin d'encoder?

Les URL ne peuvent contenir que certains caractères du jeu ASCII standard de 128 caractères. Les caractères réservés qui n'appartiennent pas à cet ensemble doivent être codés.

Cela signifie que nous devons encoder ces caractères lors du passage dans une URL. Les caractères spéciaux tels que &, space, !lorsqu'il est entré dans un besoin d'URL pour être échappées, sinon ils risquent de provoquer des situations imprévisibles.

Cas d'utilisation:

  1. L'utilisateur a soumis des valeurs sous une forme qui peut être au format chaîne et doit être transmise, comme les champs URL.
  2. Besoin d'accepter les paramètres de chaîne de requête afin de faire des requêtes GET.

Quelle est la différence entre encodeURI et encodeURIComponent?

encodeURIet encodeURIComponentsont utilisés pour coder des identificateurs de ressources uniformes (URI) en remplaçant certains caractères par une, deux, trois ou quatre séquences d'échappement représentant le codage UTF-8 du caractère.

encodeURIComponentdoit être utilisé pour encoder un composant URI - une chaîne qui est censée faire partie d'une URL.

encodeURIdoit être utilisé pour encoder un URI ou une URL existante.

Voici un tableau pratique de la différence de codage des caractères

Quels caractères sont encodés?

encodeURI() n'encodera pas: [email protected]#$&*()=:/,;?+'

encodeURIComponent() n'encodera pas: ~!*()'

Les caractères A-Z a-z 0-9 - _ . ! ~ * ' ( )ne sont pas échappés.

Exemples

const url = '//www.twitter.com' console.log(encodeURI(url)) ////www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) ////www.twitter.com%3Fq%3Dsearch 

Quand encoder

  1. Lors de l'acceptation d'une entrée pouvant contenir des espaces.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html 
  2. Lors de la création d'une URL à partir de paramètres de chaîne de requête.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99 
  3. Lors de l'acceptation de paramètres de requête pouvant avoir des caractères réservés.

 let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple 

Sommaire

Si vous avez une URL complète, utilisez encodeURI. Mais si vous avez une partie d'une URL, utilisez encodeURIComponent.

Intéressé par plus de tutoriels et JSBytes de ma part? Inscrivez-vous à ma newsletter. ou suivez-moi sur Twitter