Comment récupérer la valeur d'un paramètre en URL ?

De plus en plus de sites sont conçus en JavaScript. Il devient donc nécessaire de pouvoir récupérer les paramètres d'une URL.

Le langage JavaScript n'est pas conçu pour gérer les paramètres d'URL. C'est une tâche qui est en principe prise en charge par des langages exécutés par le serveur, comme PHP ou ASP. De plus en plus de sites sont conçus intégralement en JavaScript. Il devient donc nécessaire de pouvoir récupérer les paramètres d'une URL.

Pour réaliser cette opération, il faut utiliser l'attribut location.search. Il contient la liste des paramètres d'une URL qui suivent soit le caractère ?, soit le caractère désignant le fragment #, suivant lequel des deux arrive en premier. Il faut ensuite séparer les différents paramètres grâce au caractère &. Pour chaque paramètre, il est nécessaire de tester ensuite s'il s'agit de la première, de la deuxième ou d'une valeur supplémentaire pour ce paramètre, auquel cas il faut un tableau. Pour gagner du temps dans l'utilisation de cette fonction, vous pouvez la stocker dans une variable globale pour pouvoir l'utiliser plus facilement dans le code de votre page. Pensez dans tous les cas à bien faire appel à la fonction decodeURIComponent() qui va décoder les paramètres encodés dans l'URL.
URL : http://www.monsite.fr/page.php?par1=val1&par2=val2&par2=val3&par3=val4

//JavaScript
var parametresURL = function ()
{
 // La fonction est exécutée immédiatement et la valeur est stockée dans parametresURL 
 var parametres = {};
 //On récupère les paramètres de la requête, en retirant le premier caractère
 var requete = window.location.search.substring(1);
 var vars = requete.split(&);
 for (var i=0;i<vars.length;i++)
 {
 var couple = vars[i].split(=);
 //Pour la première entrée, on ajoute le couple clé/valeur
 if (typeof parametres[couple[0]] === undefined)
 {
 parametres[couple[0]] = decodeURIComponent(couple[1]);
 }
 // Si c'est la deuxième entrée, on transforme le paramètre en tableau
 else if (typeof parametres[couple[0]] === string)
 {
 var tableau = [parametres[couple[0]],decodeURIComponent(couple[1])];
 parametres[couple[0]] = tableau;
 }
 //A partir du troisième, on l'ajoute dans le tableau
 else
 {
 parametres[couple[0]].push(decodeURIComponent(couple[1]));
 }
 }
 return parametres;
}();
//Utilisation
alert(parametresUrl.par1);

Une autre solution plus rapide consiste à utiliser les expressions régulières. Il faut tout d'abord transformer les caractères + en espaces afin qu'ils ne posent pas problème durant l'utilisation de l'expression régulière. La fonction exec() va permettre de parcourir les résultats de l'expression régulière tant qu'il en existe dans la requête du navigateur.

function getParametresRequete(requeteNavigateur)
{
 //On transforme les + en espaces
 requeteNavigateur = requeteNavigateur.split('+').join(' ');
 var parametres = {};
 var elements;
 var expressionReguliere = /[?&]?([^=]+)=([^&]*)/g;
 while (elements = expressionReguliere.exec(requeteNavigateur))
 {
 parametres[decodeURIComponent(elements[1])] = decodeURIComponent(elements[2]);
 }
 return parametres;
}
//Utilisation
var requete = getParametresRequete(document.location.search);
alert(requete.par1);

JavaScript