JavaScript Get URL Parameters

In this JavaScript tutorial article, the author shows you 2 JavaScript solutions (small JavaScript codes) to get current JavaScript URL parameters. They're very easy to try and use, let check them by yourself.

Perhaps you would like to check more our JavaScript tutorials:
- Current Document URL Displayer
- Obtaining the URL of the Referring Document

Sampled by © JavaScriptBank.com

I found 2 simple solutions to reading GET variables with JavaScript.
They use either 'document.location' or 'window.location.href' to ready the URL and split it.

The first example I found here:

function getURLVar(urlVarName) {
    //divide the URL in half at the '?'
    var urlHalves = String(document.location).split('?');
    var urlVarValue = '';
    if(urlHalves[1])
    {
        //load all the name/value pairs into an array
        var urlVars = urlHalves[1].split('&');
        //loop over the list, and find the specified url variable
        for(i=0; i<=(urlVars.length); i++)
        {
            if(urlVars[i])
            {
                //load the name/value pair into an array
                var urlVarPair = urlVars[i].split('=');
                if (urlVarPair[0] && urlVarPair[0] == urlVarName)
                {
                    //I found a variable that matches, load it's value into the return variable
                    urlVarValue = urlVarPair[1];
                }
            }
        }
    }
    return urlVarValue;
}
 
document.write('name = ' + getURLVar('name'));

The 2nd I found here. This one is a bit more simple.

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
 
var getvars = getUrlVars();
 
document.write('name = ' + getvars['name']);

I don't really like this solution because you get 'undefined' if you select a variable that does not exist. But that may be what you want to see if a variable is present in the URL.

I simplified the first example using the slice/split idea from the 2nd example and came up with a better solution:

function getURLVar(urlVarName) {
    var urlVars = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(i=0; i<=(urlVars.length); i++)
    {
        if(urlVars[i])
        {
            var urlVarPair = urlVars[i].split('=');
            if (urlVarPair[0] && urlVarPair[0] == urlVarName)
            {
                return urlVarPair[1];
            }
        }
    }
    return "";  // Remove this if you want it to return 'undefined' when a variable does not exist in the URL.
}
 
document.write('name = ' + getURLVar('name'));

Language

Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB

Top view articles
Top 10 Beautiful Christmas Countdown Timers
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design