Grow your CSS skills. Land your dream job.

Code Snippets » JavaScript » Get URL Variables

Last updated on: February 20, 2010

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

Usage

Example URL:

http://www.example.com/index.php?id=1&image=awesome.jpg

Calling getQueryVariable("id") - would return "1".
Calling getQueryVariable("image") - would return "awesome.jpg".

Comments

kidi

Permalink to comment# October 27, 2009

Requests = {
QueryString : function(item){
var svalue = location.search.match(new RegExp(“[\?\&]” + item + “=([^\&]*)(\&?)”,”i”));
return svalue ? svalue[1] : svalue;
}
}

//usage
Requests.QueryString(“id”);

Reply ↓
- badcrocodile
  
  Permalink to comment# September 12, 2014
  
  Great snippet, but change the curly quotes to double quotes on this one.
sghakgun

Permalink to comment# February 20, 2010

nice ! thanks.

Reply ↓
Jack

Permalink to comment# February 20, 2010

Great work, this is a really nice bit of coding! As always, keep it up!

Reply ↓
Rene Merino

Permalink to comment# February 20, 2010

Nice, really helpful thanks!!

Reply ↓
Sergei Filippov

Permalink to comment# February 21, 2010

Thanks Chris, totally useful script. Soo going to use that today :D

Reply ↓
anup

Permalink to comment# September 23, 2011

beauty!!!!!!!

Reply ↓
Uzair

Permalink to comment# February 1, 2012

Can i remove the .html extension from my website having a windows based hosting?

I dont know if the server has Isapi_rewrite installed

regards

Reply ↓
rully

Permalink to comment# May 7, 2012

i think that line = return (false) would be create a bug if your url get more than one variable. false can be break a loop and return just first var in your url..

i think that line should be remove..

regards,

nb : pardon me if i wrong :)

Reply ↓
- Patrick McDougle
  
  Permalink to comment# November 6, 2012
  
  I think you might be mis-reading the brackets. After the for loop has searched all of the vars (name-value pairs) and hasn’t found variable then this function returns false.
Neil

Permalink to comment# June 19, 2012

Awesome! Thanks very much!

Reply ↓
elhoussaine

Permalink to comment# July 27, 2012

hi my friends sorry if i speak english but i can’t explain in french so
i got this one in one scripte i created it
page.html?nom=28/09/1986&from=hossa&too=hisok
and i want to get the name of variable nom and from and too
i tried many scripts but they don’t work for me
please can you tell me how to do it in javascript
thanks so much

Reply ↓
- Patrick McDougle
  
  Permalink to comment# November 6, 2012
  
  I think that is what this post is about.
  
  Just call the function defined above.
  
  getQueryVariable("nom"); – would return “28/09/1986″.
  getQueryVariable("from"); – would return “hossa”.
  getQueryVariable("too"); – would return “hisok”.
Muhammmad Ikhsan Alfatih

Permalink to comment# August 16, 2012

thanks to share :D

Reply ↓
Marcio

Permalink to comment# October 31, 2012

I tested the function of various types and only this worked.
Congratulations!

Reply ↓
Thomas Welton

Permalink to comment# December 18, 2012
I wanted to use this in CoffeeScript if you want to copy and paste this worked for me
getQueryVariable = (variable) -> query = window.location.search.substring(1)
for el in query.split "&" pair = el.split "=" return pair[1] if pair[0] is variable return false

tabs is all screwed up

Reply ↓

Robert Galindo

# February 24, 2014

Added another if statement to check for space characters ‘%20′ in the parameters

function getQueryVariable(variable) {
var query = window.location.search.substring(1)
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=")
    if(pair[0] == variable){
        if(pair[1].indexOf('%20')){
            var fullName = pair[1].split('%20')
            return fullName[0] + ' ' + fullName[1]
        }
        else {
            return pair[1];
        }
    }
}
return(false)

}

Reply ↓

Robert Galindo

# February 24, 2014

Oops I forgot ‘ != -1 ‘ Sorry about that. Here is the correct code:

function getQueryVariable(variable) {
var query = window.location.search.substring(1)
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=")
    if(pair[0] == variable){
        if(pair[1].indexOf('%20') != -1){
            console.log(pair[1].indexOf('%20'))
            var fullName = pair[1].split('%20')
            console.log(fullName)
            return fullName[0] + ' ' + fullName[1]
        }
        else {
            return pair[1];
        }
    }
}
return(false)

}

Kat

Permalink to comment# February 25, 2014

does anyone have a link to an actual live form where something like this has been implemented that I could look at as an example? Sorry I am not very experienced with javascript and having a lot of trouble figuring out how to set this up. I think I am doing something really basic wrong but I can’t figure out what.

Reply ↓
- Robert Galindo
  
  Permalink to comment# February 26, 2014
  
  Hey Kat. I made a Codepen implementing the code above.
Relfor

Permalink to comment# March 2, 2014

Hey Chris,
URL Decoding the parameters would be necessary if I’m not mistaken.
Check this solution here: http://stackoverflow.com/a/901144

Reply ↓
Howie

Permalink to comment# March 10, 2014

I am passing a query via the url (http://www.mywebsite.com/appointment-map.aspx?search=33612) and I want to use that query object in the following (urlsearch) and can’t seem to make it work.

Reply ↓

kosmos

# March 20, 2014

In addition to Robert Galindo’s code:

function QueryString(variable){
            try{
                q = location.search.substring(1);
                v = q.split("&");
                for( var i = 0; i < v.length; i++ ){
                    p = v[i].split("=");
                    if( p[0] == variable ){
                        if( p[1].indexOf('%20') != -1 ){
                            n = [];
                            for( var j = 0; j < p[1].split('%20').length; j++ ){
                                n.push(p[1].split('%20')[j]);
                            }
                            str = "";
                            for( var k = 0; k < n.length; k++ ){
                                str += n[k] + ' ';
                            }
                            return str.trim();
                        }
                        else{
                            return p[1];
                        }
                    }
                }
            }
            catch (e){
                console.log(e);
            }
        }

Now we can get more data after the first %20, I mean, all data with spaces, like uri.html?data=more%20than%20one%20space

I found this info at stackoverflow.com about speeds on “split” and “regex”:

Split method: 144,780 ±2.17% fastest
Regex method: 13,891 ±0.85% | 90% slower

Regards.

Reply ↓

kosmos

# March 20, 2014

Also, as Relfor said, using decodeUriComponent we haven’t to look for spaces (%20) or another symbols (like accents). Less lines of code, better results:

function QueryString(variable){
        try{
            q = location.search.substring(1);
            v = q.split("&");
            for( var i = 0; i < v.length; i++ ){
                p = v[i].split("=");
                if( p[0] == variable ){
                    if( p[1].indexOf('%20') != -1 ){
                        return decodeURIComponent(p[1]);
                    }
                    else{
                        return p[1];
                    }
                }
            }
        }
        catch (e){
            console.log(e);
        }
    }

Regards.

Reply ↓

Uhelliton Andrade

Permalink to comment# July 16, 2014

Nice Works! God bless my friend

Reply ↓

Thiago Romão Barcala

# August 13, 2014

A functional approach (:P):

function QueryString(variable) {
    return location.search.substring(1).split("&")
        .map(function (p) { return p.split("=") })
        .filter(function (p) { return p[0] == variable })
        .map(function (p) { return decodeURIComponent(p[1]) })
        .pop();
}

Reply ↓

Ludovic Urbain

# September 26, 2014

Even better, don’t do the work once for each query string parameter.

function read_query_string(){
    var a=window.location.search.split(/\?/);
    var b=a[1].split("&");
    var c={};
    for(var i=0;i<b.length;i++){
        var d=b[i].split("=");
        c[d[0]]=d[1];
    }
    return c;
}

Reply ↓

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

Notify me of follow-up comments by email.

Notify me of new posts by email.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

Wufoo is the most powerful online form builder out there. Easily build multi-page forms, add logic and branching, customize the design, take payments, and much more. Try it free!

*May or may not contain any actual "CSS" or "Tricks".

Get URL Variables

Usage

Comments

Leave a Comment

Posting Code