{"id":5331,"date":"2015-08-15T17:15:06","date_gmt":"2015-08-15T15:15:06","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5331"},"modified":"2016-04-04T22:02:27","modified_gmt":"2016-04-04T20:02:27","slug":"recuperer-parametres-get-url-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/javascript\/recuperer-parametres-get-url-javascript","title":{"rendered":"R\u00e9cup\u00e9rer les param\u00e8tres GET d’une URL avec JavaScript"},"content":{"rendered":"

Cela peut sembler b\u00eate, mais dans la m\u00eame semaine on m’a pos\u00e9 deux fois cette question. Dans un langage serveur, r\u00e9cup\u00e9rer les param\u00e8tres d’une URL est vraiment super facile. Mais JS ne pr\u00e9voit pas nativement cette possibilit\u00e9, je vous propose donc une petite fonction pour le faire, mais il existe certainement d’autres techniques.<\/p>\n

L’exemple de PHP<\/h2>\n

Lorsque des param\u00e8tres sont dans l’URL, PHP permet de les r\u00e9cup\u00e9rer assez facilement.
\nExemple avec l’URL : http:\/\/mondomaine.tld\/?name=geoffrey<\/code><\/p>\n

<?php\r\n\techo $_GET['name']; \/\/ affiche 'geoffrey'\r\n?><\/code><\/pre>\n
Lorsque plusieurs param\u00e8tres se succ\u00e8dent, on a quelque chose comme \u00e7a.
\nhttp:\/\/mondomaine.tld\/?name=geoffrey&age=42<\/code><\/p>\n
<?php\r\n\techo $_GET['name']; \/\/ affiche 'geoffrey'\r\n\techo $_GET['age']; \/\/ affiche '42'\r\n?><\/code><\/pre>\n
C’est ce comportement que nous allons copier.<\/p>\n
La m\u00e9thode avec JavaScript<\/h2>\n
Je vais essayer de me rapprocher le plus possible des retours offerts par PHP. C’est \u00e0 dire que si un param\u00e8tre dans l’URL est d\u00e9clar\u00e9 une deuxi\u00e8me fois, je r\u00e9cup\u00e8re le dernier. La valeur est optionnelle (ce qui se trouve apr\u00e8s le \u00e9gal) et retournera une cha\u00eene vide.<\/p>\n
function $_GET(param) {\r\n\tvar vars = {};\r\n\twindow.location.href.replace( location.hash, '' ).replace( \r\n\t\t\/[?&]+([^=&]+)=?([^&]*)?\/gi, \/\/ regexp\r\n\t\tfunction( m, key, value ) { \/\/ callback\r\n\t\t\tvars[key] = value !== undefined ? value : '';\r\n\t\t}\r\n\t);\r\n\r\n\tif ( param ) {\r\n\t\treturn vars[param] ? vars[param] : null;\t\r\n\t}\r\n\treturn vars;\r\n}<\/code><\/pre>\n
Avec cette fonction JavaScript, vous avez deux utilisations diff\u00e9rentes :<\/p>\n
var name = $_GET('name'),\r\n    age = $_GET('age');<\/code><\/pre>\n
ou, m\u00e9thode plus performante :<\/p>\n
var $_GET = $_GET(),\r\n    name = $_GET['name'],\r\n    age = $_GET['age'];<\/code><\/pre>\n
Bien s\u00fbr je me suis amus\u00e9 \u00e0 copier jusqu’au nom $_GET<\/code> 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\u00e9remment. Il vous suffira alors de renommer toutes les occurences de $_GET<\/code> en autre chose.<\/p>\n
Si jamais vous avez besoin de r\u00e9cup\u00e9rer des valeurs complexes qui serait encod\u00e9e dans l’URL (exemple avec le param\u00e8tre ?test=Hello, World!<\/code>, utilisez la fonction decodeURI()<\/code> ainsi :<\/p>\n
var deco_var = decodeURI( $_GET( 'test' ) );<\/code><\/pre>\n
\u00c0 vous de jouer maintenant !<\/p>\n
Autres m\u00e9thodes<\/h2>\n
Apr\u00e8s des \u00e9changes sur Twitter voici deux autres pistes pour arriver au m\u00eame but :<\/p>\n