{"id":5356,"date":"2015-08-15T17:33:48","date_gmt":"2015-08-15T15:33:48","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/en\/?p=5356"},"modified":"2022-10-25T21:19:55","modified_gmt":"2022-10-25T19:19:55","slug":"read-url-get-parameters-with-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/javascript-en\/read-url-get-parameters-with-javascript","title":{"rendered":"Read URL GET parameters with JavaScript"},"content":{"rendered":"

Seems to be really easy when you think about it. Though, during the same week, we questioned me two times about that. In a server language, getting the URL parameters is really easy. But JavaScript doesn’t offer a way to do it natively. I propose to you a little function to do so, but perhaps other ways exist already.<\/p>\n

The PHP way to get Get Parameters<\/h2>\n

When parameter are in URL, PHP allows getting them easily.
\nExample with this URL: http:\/\/mydomain.tld\/?name=geoffrey<\/code><\/p>\n

<?php\r\n\techo $_GET['name']; \/\/ display 'geoffrey'\r\n?><\/code><\/pre>\n
If several parameters are one after the other, we get somehting like that:
\nhttp:\/\/mydomain.tld\/?name=geoffrey&age=42<\/code><\/p>\n
<?php\r\n\techo $_GET['name']; \/\/ display 'geoffrey'\r\n\techo $_GET['age']; \/\/ display '42'\r\n?><\/code><\/pre>\n
It’s this behavior I want to mimic in JS.<\/p>\n
The JavaScript way to get URL Parameters<\/h2>\n
I’ll try to get as close as I can to what PHP returns. In other words, if a parameter is declared a second time, I pick the last one. The param value is optional (the term just after the equal symbol) and will return an empty string.<\/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
With that JS function, you have two ways to do the work:<\/p>\n
var name = $_GET('name'),\r\n    age = $_GET('age');<\/code><\/pre>\n
or, the second one, more efficient:<\/p>\n
var $_GET = $_GET(),\r\n    name = $_GET['name'],\r\n    age = $_GET['age'];<\/code><\/pre>\n
Of course, I played with the names of the function and variable, copying the $_GET<\/code> name, just to show you that it’s possible. But in a real web project, regarding its conventions (naming) especially if you use jQuery, you will probably have to rename all the $_GET<\/code> occurrences.<\/p>\n
If you need to get more complexe values which could be encoded in the URI (for example, this parameter ?test=Hello, World!<\/code>, use the decodeURI()<\/code> function like that:<\/p>\n
var deco_var = decodeURL( $_GET( 'test' ) );<\/code><\/pre>\n
Your turn to play!<\/p>\n
Other methods to get URL Parameters in JS<\/h2>\n
Thanks to Twitter, and the time passing\u2026 I’ve completed this article with two other ways with the same goal:<\/p>\n