34

I have a HTML page which is loaded using a URL that looks a little like this:

http://localhost:8080/GisProject/MainService?s=C&o=1

I would like to obtain the query string parameters in the URL without using a jsp.

Questions

  1. Can this be done using Javascript or jQuery? Because I want to test my page using my Node.js local server before deploying it in the remote machine which uses a Java server.

  2. Is there any library that will allow me to do that?

hc_dev
  • 8,389
  • 1
  • 26
  • 38
vamsiampolu
  • 6,328
  • 19
  • 82
  • 183
  • 1
    jQuery won't help here. Client side JavaScript or server side JavaScript? If server side JavaScript, what libraries are you using on your Node.js instance to do HTTP with? – Quentin Mar 24 '14 at 10:48
  • 1
    Why are you doing local development with Node.js but targetting a server that runs Java? It makes life *much* easier if your development environment mirrors your production environment as much as possible. – Quentin Mar 24 '14 at 10:49
  • 1
    @Utkanos client side...should I hardcode the modules to be loaded into the page or can I do it dynamically by parsing parameters on the client side and using the state to load the correct modules into the page.Im using requirejs by the way – vamsiampolu Mar 24 '14 at 10:52

4 Answers4

53
function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

And this is how you can use this function assuming the URL is, http://dummy.com/?technology=jquery&blog=jquerybyexample:

var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');`
Markus Zeller
  • 8,516
  • 2
  • 29
  • 35
neel shah
  • 2,231
  • 15
  • 19
  • 1
    Copying the function you provided appears to have an errant character (zero width space) at the end which will error. Might be something temporary on stackoverflow, but just want to point it out in case anyone else copies and pastes the above. – Allan Apr 13 '23 at 16:16
27

Chrome 49 implements URLSearchParams from the URL spec, an API which is useful for fiddling around with URL query parameters. The URLSearchParams interface defines utility methods to work with the query string of a URL.

So what can you do with it? Given a URL string, you can easily extract parameter values as in the code below for s & o parameter: 

//http://localhost:8080/GisProject/MainService?s=C&o=1
const params = new URLSearchParams(document.location.search);
const s = params.get("s");
const o = params.get("o");
console.info(s); //show C
console.info(o); //show 1
Vinod Srivastav
  • 3,644
  • 1
  • 27
  • 40
Pablo
  • 271
  • 3
  • 2
  • 4
    Please add at least a general explanation of what your code is doing and any helpful tips when you post a new answer - for example, it would be helpful to know that URLSearchParams doesn't exist pre-Edge or in other older browsers. It's always nice to have a plain-english explanation about your code, even when it's pretty straightforward like in your example. Great solution, though. – Joseph Jul 25 '19 at 01:00
  • 1
    This is definitely the best way to do this. The [Mozilla docs](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) should explain what's going on here. – Jordan Mitchell Barrett May 15 '22 at 03:33
11

Assuming that our URL is https://example.com/?product=shirt&color=blue&newuser&size=m, we can grab the query string using window.location.search:

 const queryString = window.location.search;
 console.log(queryString);
 // ?product=shirt&color=blue&newuser&size=m

Then we can parse the query string’s parameters using URLSearchParams:

 const urlParams = new URLSearchParams(queryString);

Then we call any of its methods on the result.

For example, URLSearchParams.get() will return the first value associated with the given search parameter:

 const product = urlParams.get('product')
 console.log(product);
 // shirt

 const color = urlParams.get('color')
 console.log(color);
 // blue

 const newUser = urlParams.get('newuser')
 console log(newUser);
 // empty string

Other Useful Methods

kolibri_king
  • 11
  • 5
Chukwuemeka Maduekwe
  • 6,687
  • 5
  • 44
  • 67
4

Let's get a non-encoded URL for example:

https://stackoverflow.com/users/3233722/pyk?myfirstname=sergio&mylastname=pyk

Packing the job in a single JS line...

urlp=[];s=location.toString().split('?');s=s[1].split('&');for(i=0;i<s.length;i++){u=s[i].split('=');urlp[u[0]]=u[1];}

And just use it anywhere in your page :-)

alert(urlp['mylastname']) //pyk
  • Even works on old browsers like ie6
PYK
  • 3,674
  • 29
  • 17