Getting the url parameters inside the html page

Question

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

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.
Is there any library that will allow me to do that?

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
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
@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

score 46 · Accepted Answer · edited Feb 15 '16 at 13:26

A nice solution is given here:

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');`

score 18 · Answer 2 · edited Oct 27 '19 at 07:05

18

//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

edited Oct 27 '19 at 07:05

Albert Renshaw

16,406
17
99
182

answered Jul 25 '19 at 00:43

Pablo

181
1
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
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

score 8 · Answer 3 · answered Jul 23 '20 at 21:48

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

We can then 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

PYK · Answer 4 · 2020-04-16T06:52:20.967

3

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

edited Apr 16 '20 at 06:52

answered Jun 07 '18 at 18:07

PYK

2,758
23
13

3

Thanks, this is the simplest and least complicated method I've used or seen demonstrated. – Michael Falciglia Nov 16 '19 at 20:59
1

My pleasure to help. I also **revised the code** in a intent to work over old web browsers too – PYK Nov 17 '19 at 15:53

Getting the url parameters inside the html page

Questions

4 Answers4

Linked