Récupérer les paramètres GET d’une URL avec JavaScript

Also available in: English

Cela peut sembler bête, mais dans la même semaine on m’a posé deux fois cette question. Dans un langage serveur, récupérer les paramètres d’une URL est vraiment super facile. Mais JS ne prévoit pas nativement cette possibilité, je vous propose donc une petite fonction pour le faire, mais il existe certainement d’autres techniques.

L’exemple de PHP

Lorsque des paramètres sont dans l’URL, PHP permet de les récupérer assez facilement.
Exemple avec l’URL : http://mondomaine.tld/?name=geoffrey

<?php
	echo $_GET['name']; // affiche 'geoffrey'
?>

Lorsque plusieurs paramètres se succèdent, on a quelque chose comme ça.
http://mondomaine.tld/?name=geoffrey&age=42

<?php
	echo $_GET['name']; // affiche 'geoffrey'
	echo $_GET['age']; // affiche '42'
?>

C’est ce comportement que nous allons copier.

La méthode avec JavaScript

Je vais essayer de me rapprocher le plus possible des retours offerts par PHP. C’est à dire que si un paramètre dans l’URL est déclaré une deuxième fois, je récupère le dernier. La valeur est optionnelle (ce qui se trouve après le égal) et retournera une chaîne vide.

function $_GET(param) {
	var vars = {};
	window.location.href.replace( location.hash, '' ).replace( 
		/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
		function( m, key, value ) { // callback
			vars[key] = value !== undefined ? value : '';
		}
	);

	if ( param ) {
		return vars[param] ? vars[param] : null;	
	}
	return vars;
}

Avec cette fonction JavaScript, vous avez deux utilisations différentes :

var name = $_GET('name'),
    age = $_GET('age');

ou, méthode plus performante :

var $_GET = $_GET(),
    name = $_GET['name'],
    age = $_GET['age'];

Bien sûr je me suis amusé à copier jusqu’au nom $_GET pour montrer que c’est possible. Mais pour des raisons de convention au sein d’un projet, notamment dans le cadre de l’utilisation de jQuery, il vous faudra certainement faire différemment. Il vous suffira alors de renommer toutes les occurences de $_GET en autre chose.

Si jamais vous avez besoin de récupérer des valeurs complexes qui serait encodée dans l’URL (exemple avec le paramètre ?test=Hello, World!, utilisez la fonction decodeURI() ainsi :

var deco_var = decodeURI( $_GET( 'test' ) );

À vous de jouer maintenant !

Autres méthodes

Après des échanges sur Twitter voici deux autres pistes pour arriver au même but :

• window.location.search qui permet d’accéder directement à tout ce qui se trouve après le « ? » dans l’URL.
  Merci à Nicolas Hoizey pour l’info.
• URLSearchParams qui possède ses propres méthodes (get(), getAll(), etc.) mais qui est encore très expérimentale à l’heure où j’écris ces lignes.
  Merci à Xavier Zalawa pour l’info.