In the case I had found working on a WordPress plugin yesterday, I needed to manipulate and read a URL that was given as a string by a user.
For example, https://www.google.ca/?output=search&q=cats was given and I would want to be able to retrieve what q‘s value was, or if it even existed.
Thanks to Adam Zwakenberg (@AdamZwakk) for showing me this cleaner version.
Current URL Method
Source – PaperMashup
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
|
Usage
var search_query = getUrlVars()['q'];
var search_value = getUrlVars()['search'];
|
URL Variable Method
function getUrlVars( url ) {
var vars = {};
var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
|
Usage
var url = 'https://www.google.ca/?output=search&q=cats';
var search_query = getUrlVars(url)['q'];
var search_value = getUrlVars(url)['search'];
|
I ing undefined while using the same code you posted.
Please help
Hi Pamela,
Which method are you using? Can you post some code here, or within a JSFiddle? I’d love to help.
dear Eric
thank you for your quick reply
function getUrlVars1()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’);
//var hashes = window.location.href.valueOf().split(‘?’).slice(1)[0].split(‘&’);
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function test()
{
var first = decodeURIComponent(getUrlVars1()["id"]);
alert(first);
}
i am getting undefined message do you have any idea why?
Not sure where you got that getUrlVars1() function from, but it’s definitely not the same as mine. When I copied your code into a fresh file, I’m immediately getting a syntax error in your var hashes line.
I suggest using the function I have here, rather than that home-grown one, and see if that works.
dear Eric
i used the below code that you suggested:
function test()
{
var url = ‘https://www.google.ca/?output=search&q=cats’;
var search_query = getUrlVars(url)[‘q’]; // ‘cats’
var search_value = getUrlVars(url)[‘search’]; // null
alert(search_value);
}
function getUrlVars( url ) {
var vars = {};
var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
same problem.
i forget to mention an important thing well this html page is an html page in titnium project based on html application
This alert SHOULD be undefined. If you notice, you’re alerting out the ‘search’ URL variable, which is not there, and thus undefined. If you alert search_query, it should give you the proper value. Also, the error I was getting was due do `&q` being a special character when surrounded by single quotes. Change them to double quotes to fix this. Updating my post above.
thank you Eric it is clear now.
but i have another question please if i enter let’s say http://localhost:81/Test.html?q='cat‘
i want on a click in html page to alert(http://localhost:81/Test.html?q='cat‘) using window.location.href.how can i do it?
If you’re on that page, just alert(window.location.href); If you want to store that url String that you passed for later use, just declare that variable outside any function, and it will be accessible in any function in the global namespace.
but window.location.href is giving me http://localhost:81/Test.html and not http://localhost:81/Test.html?q='cat‘
You may need to use window.location.search as well. Do a console.log(window.location) to see all of the possibilities. I know window.location.search does not include the hired, I think it’s everything after ( and possibly including) the ?. I’ll run a test and update this post when I have time later today. On the road right now
ok waiting thank you very much Eric.
hello Eric
any news for the below issue i am facing?
thank you in advance for your help.
Absolutely fantastic! Best short version of how to retrieve url parameters in JavaScript I’ve seen – and I searched through heaps of other code blocks before I stumbled on this one. Thank You :)