Également disponible en : Français
Seems to be stupid like that, but during the same week, we questioned me two times about that. In a server language, get the URL parameters is really easy. But JavaScript doesn’t expect a way to do it natively. I propose to you a little function to do so, but perhaps other ways already exist.
The PHP way
When parameter are in URL, PHP allows getting them easily.
Example with this URL: http://mydomain.tld/?name=geoffrey
<?php
echo $_GET['name']; // display 'geoffrey'
?>
If several parameters are one after the other, we get somehting like that:
http://mydomain.tld/?name=geoffrey&age=42
<?php
echo $_GET['name']; // display 'geoffrey'
echo $_GET['age']; // display '42'
?>
It’s this behavior we will copy right now.
The JavaScript way
I’ll try to get closer the more that I can of the returns PHP gives us. 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.
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;
}
With that JS function, you have two ways to do the work:
var name = $_GET('name'),
age = $_GET('age');
or, second one, more efficient:
var $_GET = $_GET(),
name = $_GET['name'],
age = $_GET['age'];
Of course, I played with the names of the function and variable, copying the $_GET
name, just to show you that is possible. But in the real project, regarding to its conventions (naming) especially if you use jQuery, you will probably have to rename all the $_GET
occurences.
If you need to get more complexe values which could be encoded in the URI (for example, this parameter ?test=Hello, World!
, user the decodeURI()
function like that:
var deco_var = decodeURL( $_GET( 'test' ) );
Your turn to play!
Other methods
Thanks to Twitter, I complete this article with two other ways with the same goal :
- window.location.search which allows you to access directly to everything found just after the “?” mark in the URL.
Thank you to Nicolas Hoizey for that information. - URLSearchParams which has its own methods (get(), getAll(), etc.) but which is very experimental at this time.
Thank you to Xavier Zalawa for that information.
This is awesome! Can you post an example of how to use the JavaScript solution in a flat html file? I’m having issues invoking this in a single html file using tags. Thanks!
Hello Andrew,
Sorry for the late reply, for unknown reason WordPress never informed me of your comment.
This should work if you put your JS part before the closing body tag, either the external or inline way.
Maybe you can share with me your HTML file? (firstname.lastname on gmail.com ;p)