UrlQuery

Ce billet montre 2 méthodes permettant d'accéder en Javascript aux paramètres d'une URL  (URLQuery) :

  • utiliser la fonction extractUrlParams() expliquée ci-dessous ;

  • utiliser l'API native URLSearchParams() des navigateurs Web modernes.

Billet créé le :
18 nov 2020

1. la fonction extractUrlParams()

Le code de la fonction :

      1.  function extractUrlParams(){         
      2.      var t = location.search.substring(1).split('&');
      3       var f = [];
      4       for (var i=0; i<t.length; i++){                     
      5            var x = t[ i ].split('=');
      6            f[x[0]]=x[1];
      7     }
      8     return f;
      9 }

Cette fonction s'utilise ainsi ;      
    var param = extractUrlParams();
    console.info( 'n : ', param['n']);
    console.info( 'nb : ', param['nb']);

Pour l'url suivante : http://example.info?n=205&nb=0123, elle rendra :
         n : 205
         nb : 0123

La ligne 2 du code utilise la propriété "search" de l'interface Location.

  • location.search rends la chaine ("query string")  formée par le '?' suivi des paramètres de l'URL donc rend ?n=205&nb=0123 dans notre exemple.

  • location.search.substring(1) supprime le '?' de la chaine donc rend n=205&nb=0123.

  • location.search.substring(1).split('&') rends le tableau formé des paramètres de l'URL. split('&') divise la chaine en fonction du motif '&' donc rend  [n=205,nb=0123].

La ligne 4 est la déclaration de la  boucle  for (var i=0; i<2; i++)

  • t.length vaut 2

La ligne 5 divise chaque paramètre de l'URL en fonction du motif  '=' 

  • au premier tour : i=0 ; t[0]="n=205" donc x est le tableau [n,205]

  • au second tour : i=1 ; t[1]="nb=0123" donc x est le tableau [nb,0123]

La ligne 6 instancie à chaque tour de boucle un élément du dictionnaire f.  Au 1er tour, création de la clef n de valeur 205 puis au 2eme tour de la clef nb de valeur 0123.

information complémentaire disponible en cliquant ici

Cliquez sur le bouton pour copier le code
dans le presse papier 
    
function extractUrlParams(){
    var t = location.search.substring(1).split('&');
    var f = [];
    for (var i=0; i<t.length; i++){
        var x = t[ i ].split('=');
        f[x[0]]=x[1];
    }
    return f;
}

2. URLSearchParams()

  Cette fonction s'utilise ainsi :  

       const UrlQuery = new URLSearchParams (location.search.substring(1));
       console.info( 'n : ', UrlQuery.getAll('n')[0]);
       console.info( 'nb : ', UrlQuery.getAll('nb')[0]);

pour l'url suivante : http://example.info?n=205&nb=0123; elle rendra
     n : 205
     nb : 0123

Lire cette page, pour obtenir d'avantage d'informations.