[javascript] How to get the value from the GET parameters?

I have a URL with some GET parameters as follows:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 

I need to get the whole value of c. I tried to read the URL, but I got only m2. How do I do this using JavaScript?

This question is related to javascript url url-parameters

The answer is


simplified version, tested

function get(name){
    var r = /[?&]([^=#]+)=([^&#]*)/g,p={},match;
    while(match = r.exec(window.location)) p[match[1]] = match[2];
    return p[name];
}

usage:

var parameter = get['parameter']


    function gup() {
    var qs = document.location.search;
    qs = qs.split('+').join(' ');
    var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
    while (tokens = re.exec(qs))
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    return params;
}

use it like

var params = gup()

and then

params.param1
params.param2

This works:

function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

I didn't get any of the other top answers to work.


I wrote a more simple and elegant solution.

var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];

ECMAScript 6 solution:

var params = window.location.search
  .substring(1)
  .split("&")
  .map(v => v.split("="))
  .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())

Get a single param value:

function getQueryParameter(query, parameter) {
return (window.location.href.split(parameter + '=')[1].split('&')[0]);}

See this

function getURLParameters(paramName)
{
    var sURL = window.document.URL.toString();
    if (sURL.indexOf("?") > 0)
    {
        var arrParams = sURL.split("?");
        var arrURLParams = arrParams[1].split("&");
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);

        var i = 0;
        for (i = 0; i<arrURLParams.length; i++)
        {
            var sParam =  arrURLParams[i].split("=");
            arrParamNames[i] = sParam[0];
            if (sParam[1] != "")
                arrParamValues[i] = unescape(sParam[1]);
            else
                arrParamValues[i] = "No Value";
        }

        for (i=0; i<arrURLParams.length; i++)
        {
            if (arrParamNames[i] == paramName)
            {
                //alert("Parameter:" + arrParamValues[i]);
                return arrParamValues[i];
            }
        }
        return "No Parameters Found";
    }
}

Here is my solution: jsfiddle

The method below returns a dictionary containing the parameters of the given URL. In case there are no paramters it will be null.

function getParams(url){
    var paramsStart = url.indexOf('?');
    var params = null;

    //no params available
    if(paramsStart != -1){
        var paramsString = url.substring(url.indexOf('?') + 1, url.length);

        //only '?' available
        if(paramsString != ""){
            var paramsPairs = paramsString.split('&');

            //preparing
            params = {};
            var empty = true;
            var index  = 0;
            var key = "";
            var val = "";

            for(i = 0, len = paramsPairs.length; i < len; i++){
                index = paramsPairs[i].indexOf('=');

                //if assignment symbol found
                if(index != -1){
                    key = paramsPairs[i].substring(0, index);
                    val = paramsPairs[i].substring(index + 1, paramsPairs[i].length);

                    if(key != "" && val != ""){

                        //extend here for decoding, integer parsing, whatever...

                        params[key] = val;

                        if(empty){
                            empty = false;
                        }
                    }                    
                }
            }

            if(empty){
                params = null;
            }
        }
    }

    return params;
}

function parseUrl(url){
    let urlParam = url.split("?")[1];
    console.log("---------> URL param : " + urlParam);
    urlParam = urlParam.split("&");
    let urlParamObject = {};
    for(let i=0;i < urlParam.length;i++){
        let tmp = urlParam[i].split("=");
        urlParamObject[tmp[0]] = tmp[1];
    }
    return urlParamObject;
}

let param = parseUrl(url);
param.a // output 10
param.b // output 20

Yet another suggestion.

There are some good answers already, but I found them needlessly complex and hard to understand. This is short, simple, and returns a simple associative array with key names corresponding to the token names in the URL.

I added a version with comments below for those who want to learn.

Note this relies on jQuery ($.each) for its loop, which I recommend instead of forEach. I find it simpler to ensure cross-browser compatibility using jQuery across the board rather than plugging in individual fixes to support whichever new functions aren't supported in older browsers.

Edit: After I wrote this I noticed Eric Elliott's answer, which is almost the same, though it uses forEach, while I'm generally against (for reasons stated above).

function getTokens(){
    var tokens = [];
    var query = location.search;
    query = query.slice(1);
    query = query.split('&');
    $.each(query, function(i,value){    
        var token = value.split('=');   
        var key = decodeURIComponent(token[0]);     
        var data = decodeURIComponent(token[1]);
        tokens[key] = data;
    });
    return tokens;
}

Commented version:

function getTokens(){
    var tokens = [];            // new array to hold result
    var query = location.search; // everything from the '?' onward 
    query = query.slice(1);     // remove the first character, which will be the '?' 
    query = query.split('&');   // split via each '&', leaving us an array of something=something strings

    // iterate through each something=something string
    $.each(query, function(i,value){    

        // split the something=something string via '=', creating an array containing the token name and data
        var token = value.split('=');   

        // assign the first array element (the token name) to the 'key' variable
        var key = decodeURIComponent(token[0]);     

        // assign the second array element (the token data) to the 'data' variable
        var data = decodeURIComponent(token[1]);

        tokens[key] = data;     // add an associative key/data pair to our result array, with key names being the URI token names
    });

    return tokens;  // return the array
}

For the examples below we'll assume this address:

http://www.example.com/page.htm?id=4&name=murray

You can assign the URL tokens to your own variable:

var tokens = getTokens();

Then refer to each URL token by name like this:

document.write( tokens['id'] );

This would print "4".

You can also simply refer to a a token name from the function directly:

document.write( getTokens()['name'] );

...which would print "murray".


// http:localhost:8080/path?param_1=a&param_2=b
var getParamsMap = function () {
    var params = window.location.search.split("&");
    var paramsMap = {};
    params.forEach(function (p) {
        var v = p.split("=");
        paramsMap[v[0]]=decodeURIComponent(v[1]);
    });
    return paramsMap;
};

// -----------------------

console.log(getParamsMap()["param_1"]);  // should log "a"     

Here is the angularJs source code for parsing url query parameters into an Object :

_x000D_
_x000D_
function tryDecodeURIComponent(value) {_x000D_
  try {_x000D_
    return decodeURIComponent(value);_x000D_
  } catch (e) {_x000D_
    // Ignore any invalid uri component_x000D_
  }_x000D_
}_x000D_
_x000D_
function isDefined(value) {return typeof value !== 'undefined';}_x000D_
_x000D_
function parseKeyValue(keyValue) {_x000D_
  keyValue = keyValue.replace(/^\?/, '');_x000D_
  var obj = {}, key_value, key;_x000D_
  var iter = (keyValue || "").split('&');_x000D_
  for (var i=0; i<iter.length; i++) {_x000D_
    var kValue = iter[i];_x000D_
    if (kValue) {_x000D_
      key_value = kValue.replace(/\+/g,'%20').split('=');_x000D_
      key = tryDecodeURIComponent(key_value[0]);_x000D_
      if (isDefined(key)) {_x000D_
        var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;_x000D_
        if (!hasOwnProperty.call(obj, key)) {_x000D_
          obj[key] = val;_x000D_
        } else if (isArray(obj[key])) {_x000D_
          obj[key].push(val);_x000D_
        } else {_x000D_
          obj[key] = [obj[key],val];_x000D_
        }_x000D_
      }_x000D_
    }_x000D_
  };_x000D_
  return obj;_x000D_
}_x000D_
_x000D_
alert(JSON.stringify(parseKeyValue('?a=1&b=3&c=m2-m3-m4-m5')));
_x000D_
_x000D_
_x000D_

You can add this function to window.location:

window.location.query = function query(arg){
  q = parseKeyValue(this.search);
  if (!isDefined(arg)) {
    return q;
  }      
  if (q.hasOwnProperty(arg)) {
    return q[arg];
  } else {
    return "";
  }
}

// assuming you have this url :
// http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5

console.log(window.location.query())

// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}

console.log(window.location.query('c'))

// "m2-m3-m4-m5"

I use

function getVal(str) {
    var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)'));
    return v ? v[1] : null;
}

source

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')

In my case ( redirect to new domain with all sub url )::

window.location.replace("https://newdomain.com" + window.location.pathname);

Use dojo. No other solution on here is this short or as well-tested:

require(["dojo/io-query"], function(ioQuery){
    var uri = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ";
    var query = uri.substring(uri.indexOf("?") + 1, uri.length);
    var queryObject = ioQuery.queryToObject(query);
    console.log(queryObject.c); //prints m2-m3-m4-m5
});

Here is a recursive solution that has no regex, and has minimal mutation (only the params object is mutated, which I believe is unavoidable in JS).

It's awesome because it:

  • Is recursive
  • Handles multiple parameters of the same name
  • Deals well with malformed parameter strings (missing values, so on)
  • Doesn't break if '=' is in the value
  • Performs URL decoding
  • And lastly, It's awesome because it...argh!!!

Code:

var get_params = function(search_string) {

  var parse = function(params, pairs) {
    var pair = pairs[0];
    var parts = pair.split('=');
    var key = decodeURIComponent(parts[0]);
    var value = decodeURIComponent(parts.slice(1).join('='));

    // Handle multiple parameters of the same name
    if (typeof params[key] === "undefined") {
      params[key] = value;
    } else {
      params[key] = [].concat(params[key], value);
    }

    return pairs.length == 1 ? params : parse(params, pairs.slice(1))
  }

  // Get rid of leading ?
  return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}

var params = get_params(location.search);

// Finally, to get the param you want
params['c'];

For Single Parameter Value like this index.html?msg=1 use following code,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search.substring(1);
    var varArray = queryString.split("="); //eg. index.html?msg=1

    var param1 = varArray[0];
    var param2 = varArray[1];

}

For All Parameter Value use following Code,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search;
    var varArray = queryString.split("&");
    for (var i=0;i<varArray.length;i++) {
      var param = varArray[i].split("=");
        //parameter-value pair
    }
} 

I found this ages ago, very easy:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

Then call it like this:

var fType = getUrlVars()["type"];

This Gist by Eldon McGuinness is by far the most complete implementation of a JavaScript query string parser that I've seen so far.

Unfortunately, it's written as a jQuery plugin.

I rewrote it to vanilla JS and made a few improvements :

_x000D_
_x000D_
function parseQuery(str) {_x000D_
  var qso = {};_x000D_
  var qs = (str || document.location.search);_x000D_
  // Check for an empty querystring_x000D_
  if (qs == "") {_x000D_
    return qso;_x000D_
  }_x000D_
  // Normalize the querystring_x000D_
  qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');_x000D_
  while (qs.indexOf("&&") != -1) {_x000D_
    qs = qs.replace(/&&/g, '&');_x000D_
  }_x000D_
  qs = qs.replace(/([\&]+$)/, '');_x000D_
  // Break the querystring into parts_x000D_
  qs = qs.split("&");_x000D_
  // Build the querystring object_x000D_
  for (var i = 0; i < qs.length; i++) {_x000D_
    var qi = qs[i].split("=");_x000D_
    qi = qi.map(function(n) {_x000D_
      return decodeURIComponent(n)_x000D_
    });_x000D_
    if (typeof qi[1] === "undefined") {_x000D_
      qi[1] = null;_x000D_
    }_x000D_
    if (typeof qso[qi[0]] !== "undefined") {_x000D_
_x000D_
      // If a key already exists then make this an object_x000D_
      if (typeof (qso[qi[0]]) == "string") {_x000D_
        var temp = qso[qi[0]];_x000D_
        if (qi[1] == "") {_x000D_
          qi[1] = null;_x000D_
        }_x000D_
        qso[qi[0]] = [];_x000D_
        qso[qi[0]].push(temp);_x000D_
        qso[qi[0]].push(qi[1]);_x000D_
_x000D_
      } else if (typeof (qso[qi[0]]) == "object") {_x000D_
        if (qi[1] == "") {_x000D_
          qi[1] = null;_x000D_
        }_x000D_
        qso[qi[0]].push(qi[1]);_x000D_
      }_x000D_
    } else {_x000D_
      // If no key exists just set it as a string_x000D_
      if (qi[1] == "") {_x000D_
        qi[1] = null;_x000D_
      }_x000D_
      qso[qi[0]] = qi[1];_x000D_
    }_x000D_
  }_x000D_
  return qso;_x000D_
}_x000D_
_x000D_
// DEMO_x000D_
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));
_x000D_
_x000D_
_x000D_

See also this Fiddle.


Here I am posting one example. But it's in jQuery. Hope it will help others:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990-->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')          // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')   // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});
</script>

One liner and IE11 friendly:

> (window.location.href).match('c=([^&]*)')[1]
> "m2-m3-m4-m5"

I prefer to use available resources rather than reinventing how to parse those params.

  1. Parse the URL as an object
  2. Extract the search params part
  3. Transform the searchParams from an Iterator to an Array with array expansion.
  4. Reduce the key-value array into an object.

_x000D_
_x000D_
const url = 'http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';_x000D_
const params = [... new URL(url).searchParams.entries()]_x000D_
  .reduce((a, c) => Object.assign(a, {[c[0]]:c[1]}), {})_x000D_
_x000D_
console.log(params);
_x000D_
_x000D_
_x000D_


you can do it by bellow function:

function getParameter(parameterName){
        let paramsIndex = document.URL.indexOf("?");
        let params="";
        if(paramsIndex>0)
            params=document.URL.substring(paramsIndex+1, document.URL.length).split("&");
        let result = [];
        for(let i=0;i<params.length;i++)
        {
            console.warn(params[i].split("=")[0].toString()+ "," + params[i].split("=")[1].toString());
            var obj = {"key":params[i].split("=")[0].toString(),"value":params[i].split("=")[1].toString()};
            result.push(obj);
        }
        return passedValue = result.find(x=>x.key==parameterName).value;
    }

now you can get parameter value with getParameter("parameterName")


// Read a page's GET URL variables and return them as an associative array.
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;
}

// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];

Got from here: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html


The shortest way:

new URL(location.href).searchParams.get("my_key");

this question has too many answers, so i'm adding another one.

/**
 * parses and returns URI query parameters 
 * 
 * @param {string} param parm
 * @param {bool?} asArray if true, returns an array instead of a scalar 
 * @returns {Object|Array} 
 */
function getURIParameter(param, asArray) {
    return document.location.search.substring(1).split('&').reduce(function(p,c) {
        var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); });
        if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
        return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
    }, []);
}

usage:

getURIParameter("id")  // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids

this copes with empty parameters (those keys present without "=value"), exposure of both a scalar and array-based value retrieval API, as well as proper URI component decoding.


I had the need to read a URL GET variable and complete an action based on the url parameter. I searched high and low for a solution and came across this little piece of code. It basically reads the current page url, perform some regular expression on the URL then saves the url parameters in an associative array, which we can easily access.

So as an example if we had the following url with the javascript at the bottom in place.

http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July

All we’d need to do to get the parameters id and page are to call this:

The Code will be:

<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];

alert(first);
alert(second);
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
</script>

window.location.href.split("?")

then disregard the first index

Array.prototype.slice.call(window.location.href.split("?"), 1) 

returns an array of your url parameters

var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1);
var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ?  (x[y] = a[i+1]) : void 0; return x; }, {});

A bit more verbose/hacky but also functional, paramObject contains all parameters mapped as a js object


As mentioned in the first answer in the latest browser we can use new URL api, However a more consistent native javascript easy solution to get all the params in an object and use them could be

For Example this class say locationUtil

const locationSearch = () => window.location.search;
const getParams = () => {
  const usefulSearch = locationSearch().replace('?', '');
  const params = {};
  usefulSearch.split('&').map(p => {
    const searchParam = p.split('=');
    const [key, value] = searchParam;
    params[key] = value;
    return params;
  });
  return params;
};

export const searchParams = getParams();

Usage :: Now you can import searchParams object in your class

for Example for url --- https://www.google.com?key1=https://www.linkedin.com/in/spiara/&valid=true

import { searchParams } from '../somewhere/locationUtil';

const {key1, valid} = searchParams;
if(valid) {
 console.log("Do Something");
 window.location.href = key1;
}

To extract all url params from search object in window.location as json

export const getURLParams = location => {
    const searchParams = new URLSearchParams(location.search)
    const params = {}

    for (let key of searchParams.keys()) {
        params[key] = searchParams.get(key)
    }

    return params
}

console.log(getURLParams({ search: '?query=someting&anotherquery=anotherthing' }))

// --> {query: "someting", anotherquery: "anotherthing"}

Try

url.match(/[?&]c=([^&]*)/)[1]

_x000D_
_x000D_
var url = "www.test.com/t.html?a=1&bc=3&c=m2-m3-m4-m5";_x000D_
_x000D_
c= url.match(/[?&]c=([^&]*)/)[1];_x000D_
_x000D_
console.log(c);
_x000D_
_x000D_
_x000D_

This is improvement of Daniel Sokolowski answer Jun 27 '19. Regexp explanation

  • [?&] first matched character must be ? or & (to omit param like ac=)
  • c= name of parameter with = char at end
  • (...) match in first group
  • [^&]* zero or more characters ( * ) different (^) than &
  • [1] choose first group from array of matches

We can get the c parameter values in a simpler way without looping all the parameters, see the below jQuery to get the parameters.

1. To Get the Parameter value:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"")

(or)

url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"")

returns as a string

"m2-m3-m4-m5"

2. To Replace the parameter value:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)

A super simple way using URLSearchParams.

function getParam(param){
  return new URLSearchParams(window.location.search).get(param);
}

It's currently supported in Chrome, Firefox, Safari, Edge, and others.


Browsers vendors have implemented a native way to do this via URL and URLSearchParams.

let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c'));  // outputs "m2-m3-m4-m5"

Currently supported in Firefox, Opera, Safari, Chrome and Edge. For a list of browser support see here.

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

https://url.spec.whatwg.org/

Eric Bidelman, an engineer at Google, recommends using this polyfill for unsupported browsers.


Here's a solution I find a little more readable -- but it will require a .forEach() shim for < IE8:

var getParams = function () {
  var params = {};
  if (location.search) {
    var parts = location.search.slice(1).split('&');

    parts.forEach(function (part) {
      var pair = part.split('=');
      pair[0] = decodeURIComponent(pair[0]);
      pair[1] = decodeURIComponent(pair[1]);
      params[pair[0]] = (pair[1] !== 'undefined') ?
        pair[1] : true;
    });
  }
  return params;
}

Here's a short and simple function for getting a single param:

function getUrlParam(paramName) {
    var match = window.location.search.match("[?&]" + paramName + "(?:&|$|=([^&]*))");
    return match ? (match[1] ? decodeURIComponent(match[1]) : "") : null;
}

The handling of these special cases are consistent with URLSearchParams:

  • If the parameter is missing, null is returned.

  • If the parameter is present but there is no "=" (e.g. "?param"), "" is returned.

Note! If there is a chance that the parameter name can contain special URL or regex characters (e.g. if it comes from user input) you need to escape it. This can easily be done like this:

function getUrlParamWithSpecialName(paramName) {
    return getUrlParam(encodeURIComponent(paramName).replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
}

This is an easy way to check just one parameter:

Example URL:

http://myserver/action?myParam=2

Example Javascript:

var myParam = location.search.split('myParam=')[1]

if "myParam" exists in the URL... variable myParam will contain "2", otherwise it will be undefined.

Maybe you want a default value, in that case:

var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';

Update: This works better:

var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
var result = captured ? captured : 'myDefaultValue';

And it works right even when URL is full of parameters.


function getParamValue(param) {
    var urlParamString = location.search.split(param + "=");
    if (urlParamString.length <= 1) return "";
    else {
        var tmp = urlParamString[1].split("&");
        return tmp[0];
    }
}

This should work for your case no matter the param is last or not.


The easiest way using the replace() method:

From the urlStr string:

paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

or from the current URL:

paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

Explanation:

  • document.URL - interface returns the document location (page url) as a string.
  • replace() - method returns a new string with some or all matches of a pattern replaced by a replacement.
  • /.*param_name=([^&]*).*/ - the regular expression pattern enclosed between slashes which means:
    • .* - zero or more of any characters,
    • param_name= - param name which is serched,
    • () - group in regular expression,
    • [^&]* - one or more of any characters excluding &,
    • | - alternation,
    • $1 - reference to first group in regular expression.

_x000D_
_x000D_
var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';_x000D_
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');_x000D_
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');_x000D_
console.log(`c === '${c}'`);_x000D_
console.log(`notExisted === '${notExisted}'`);
_x000D_
_x000D_
_x000D_


I have had the same problem over and over again. Now many users here now I'm famous for my HAX work,

so I solve it by using:

PHP:

echo "<p style="display:none" id=\"hidden-GET\">".$_GET['id']."</p>";

JS:

document.getElementById("hidden-GET").innerHTML;

Simple HAX but working.


You can simply use core javascript to get the param's key value as a js object:

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5";
var url = new URL(url_string);
let obj = {};
var c = url.searchParams.forEach((value, key) => {
  obj[key] = value;
});
console.log(obj);

I developed a JavaScript tool to do this in one easy step

First, copy this script link into the head of your HTML:

<script src="https://booligoosh.github.io/urlParams/urlParams.js"></script>

Then simply get the value of c using urlParams.c or urlParams['c']. Simple!

You can see a real demo using your values here.

Also keep in mind that I did develop this, but it's an easy and carefree solution to your problem. This tool also includes hex character decoding, which can often be helpful.


You can add an input box and then ask the user to copy the value into it...it's really easy that way:

<h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1>
<input type='text' id='the-url-value' />
<input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' />

<script>
//...read the value on click

Ok, seriously though...I found this code and it seems to work good:

http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/

function queryToJSON() {
    var pairs = location.search.slice(1).split('&');

    var result = {};
    pairs.forEach(function(pair) {
        pair = pair.split('=');
        result[pair[0]] = decodeURIComponent(pair[1] || '');
    });

    return JSON.parse(JSON.stringify(result));
}

var query = queryToJSON();

you can run this function

    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 source = getUrlVars()["lm_supplier"];
    var el = source.toString();
    var result= decodeURI(el);

console.log(result)

this function get what you want from the url, var source = getUrlVars()["put what you want to get from the url"];


I use the parseUri library. It allows you to do exactly what you are asking for:

var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5';
var c = uri.queryKey['c'];
// c = 'm2-m3-m4-m5'

Elegant, functional style solution

Let's create an object containing URL param names as keys, then we can easily extract the parameter by its name:

// URL: https://example.com/?test=true&orderId=9381  

// Build an object containing key-value pairs
export const queryStringParams = window.location.search
  .split('?')[1]
  .split('&')
  .map(keyValue => keyValue.split('='))
  .reduce<QueryStringParams>((params, [key, value]) => {
    params[key] = value;
    return params;
  }, {});

type QueryStringParams = {
  [key: string]: string;
};


// Return URL parameter called "orderId"
return queryStringParams.orderId;

Or if you don't want to reinvent the URI parsing wheel use URI.js

To get the value of a parameter named foo:

new URI((''+document.location)).search(true).foo

What that does is

  1. Convert document.location to a string (it's an object)
  2. Feed that string to URI.js's URI class construtor
  3. Invoke the search() function to get the search (query) portion of the url
    (passing true tells it to output an object)
  4. Access the foo property on the resulting object to get the value

Here's a fiddle for this.... http://jsfiddle.net/m6tett01/12/


I like writing shorthand as much as possible:

URL: example.com/mortgage_calc.htm?pmts=120&intr=6.8&prin=10000

Vanilla Javascript:

for ( var vObj = {}, i=0, vArr = window.location.search.substring(1).split('&');
        i < vArr.length; v = vArr[i++].split('='), vObj[v[0]] = v[1] ){}
// vObj = {pmts: "120", intr: "6.8", prin: "10000"}

$_GET: function (param) {
    var regex = new RegExp("(?:[?&]+" + param + "=)([^&]*)?", "i");
    var match = regex.exec(window.location.href);
    return match === null ? match : match[1];
}

Here is my solution. As advised by Andy E while answering this question, it's not good for your script's performance if it's repeatedly building various regex strings, running loops etc just to get a single value. So, I've come up with a simpler script that returns all the GET parameters in a single object. You should call it just once, assign the result to a variable and then, at any point in the future, get any value you want from that variable using the appropriate key. Note that it also takes care of URI decoding (i.e things like %20) and replaces + with a space:

 function getUrlQueryParams(url) {
  var queryString = url.split("?")[1];
  var keyValuePairs = queryString.split("&");
  var keyValue = [];
  var queryParams = {};
  keyValuePairs.forEach(function(pair) {
    keyValue = pair.split("=");
    queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(/\+/g, " ");
});
  return queryParams;
}

So, here are are a few tests of the script for you to see:

// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".

// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".

// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".

Simple way

function getParams(url){
        var regex = /[?&]([^=#]+)=([^&#]*)/g,
            params = {},
            match;
        while(match = regex.exec(url)) {
            params[match[1]] = match[2];
        }
        return params;
    }

then call it like getParams(url)


PHP parse_str copycat.. :)

// Handles also array params well
function parseQueryString(query) {
    var pars = (query != null ? query : "").replace(/&+/g, "&").split('&'),
        par, key, val, re = /^([\w]+)\[(.*)\]/i, ra, ks, ki, i = 0,
        params = {};

    while ((par = pars.shift()) && (par = par.split('=', 2))) {
        key = decodeURIComponent(par[0]);
        // prevent param value going to be "undefined" as string
        val = decodeURIComponent(par[1] || "").replace(/\+/g, " ");
        // check array params
        if (ra = re.exec(key)) {
            ks = ra[1];
            // init array param
            if (!(ks in params)) {
                params[ks] = {};
            }
            // set int key
            ki = (ra[2] != "") ? ra[2] : i++;
            // set array param
            params[ks][ki] = val;
            // go on..
            continue;
        }
        // set param
        params[key] = val;
    }

    return params;
}

var query = 'foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last';
var params = parseQueryString(query);
console.log(params)
console.log(params.foo)        // 1
console.log(params.bar)        // The bar!
console.log(params.arr[0])     // a0
console.log(params.arr[1])     // a1
console.log(params.arr.s)      // as
console.log(params.arr.none)   // undefined
console.log("isset" in params) // true like: isset($_GET['isset'])



/*
// in php
parse_str('foo=1&bar=The+bar!%20&arr[]=a0&arr[]=a1&arr[s]=as&isset&arr[]=last', $query);
print_r($query);

Array
(
    [foo] => 1
    [bar] => The bar!
    [arr] => Array
        (
            [0] => a0
            [1] => a1
            [s] => as
            [2] => last
        )

    [isset] =>
)*/

You can get the query string in location.search, then you can split everything after the question mark:

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

// Now you can get the parameters you want like so:
var abc = params.abc;

window.location.search.slice(1).split('&').reduce((res, val) => ({...res, [val.split('=')[0]]: val.split('=')[1]}), {})

I made a function that does this:

var getUrlParams = function (url) {
  var params = {};
  (url + '?').split('?')[1].split('&').forEach(function (pair) {
    pair = (pair + '=').split('=').map(decodeURIComponent);
    if (pair[0].length) {
      params[pair[0]] = pair[1];
    }
  });
  return params;
};

Update 5/26/2017, here is an ES7 implementation (runs with babel preset stage 0, 1, 2, or 3):

const getUrlParams = url => `${url}?`.split('?')[1]
  .split('&').reduce((params, pair) =>
    ((key, val) => key ? {...params, [key]: val} : params)
    (...`${pair}=`.split('=').map(decodeURIComponent)), {});

Some tests:

console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''}
console.log(getUrlParams('https://google.com/')); // Will log {}
console.log(getUrlParams('a=1&b=2&c')); // Will log {}

Update 3/26/2018, here is a Typescript implementation:

const getUrlParams = (search: string) => `${search}?`
  .split('?')[1]
  .split('&')
  .reduce(
    (params: object, pair: string) => {
      const [key, value] = `${pair}=`
        .split('=')
        .map(decodeURIComponent)

      return key.length > 0 ? { ...params, [key]: value } : params
    },
    {}
  )

Update 2/13/2019, here is an updated TypeScript implementation that works with TypeScript 3.

interface IParams { [key: string]: string }

const paramReducer = (params: IParams, pair: string): IParams => {
  const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)

  return key.length > 0 ? { ...params, [key]: value } : params
}

const getUrlParams = (search: string): IParams =>
  `${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})

Learning from many answers (like VaMoose's, Gnarf's or Blixt's).

You can create an object (or use the Location object) and add a method that allows you to get the URL parameters, decoded and with JS style:

Url = {
    params: undefined,
    get get(){
        if(!this.params){
            var vars = {};
            if(url.length!==0)
                url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
                    key=decodeURIComponent(key);
                    if(typeof vars[key]==="undefined") {
                        vars[key]= decodeURIComponent(value);
                    }
                    else {
                        vars[key]= [].concat(vars[key], decodeURIComponent(value));
                    }
                });
            this.params = vars;
        }
        return this.params;
    }
};

This allows the method to be called just using Url.get.

The first time it will fetch the object from the url, next times it will load the saved ones.

Example

In a url like ?param1=param1Value&param2=param2Value&param1=param1Value2, parameters can be fetched like:

Url.get.param1 //["param1Value","param1Value2"]
Url.get.param2 //"param2Value"

Most implementations I've seen miss out URL-decoding the names and the values.

Here's a general utility function that also does proper URL-decoding:

function getQueryParams(qs) {
    qs = qs.split('+').join(' ');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);

I tried a lot of different ways, but this tried and true regex function works for me when I am looking for param values in a URL, hope this helps:

_x000D_
_x000D_
        var text = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'_x000D_
_x000D_
        function QueryString(item, text){_x000D_
            var foundString = text.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));_x000D_
            return foundString ? foundString[1] : foundString;_x000D_
        }_x000D_
_x000D_
        console.log(QueryString('c', text));
_x000D_
_x000D_
_x000D_

use like QueuryString('param_name', url) and will return the value

m2-m3-m4-m5


Here is what I do:

var uriParams = getSearchParameters();
alert(uriParams.c);


// background functions:

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to url

What is the difference between URL parameters and query strings? Allow Access-Control-Allow-Origin header using HTML5 fetch API File URL "Not allowed to load local resource" in the Internet Browser Slack URL to open a channel from browser Getting absolute URLs using ASP.NET Core How do I load an HTTP URL with App Transport Security enabled in iOS 9? Adding form action in html in laravel React-router urls don't work when refreshing or writing manually URL for public Amazon S3 bucket How can I append a query parameter to an existing URL?

Examples related to url-parameters

What is the difference between URL parameters and query strings? RestTemplate: How to send URL and query parameters together How can I get query parameters from a URL in Vue.js? How can I get the named parameters from a URL using Flask? How to get a URL parameter in Express? PHP check if url parameter exists Pass Hidden parameters using response.sendRedirect() How to convert URL parameters to a JavaScript object? How to replace url parameter with javascript/jquery? Username and password in https url