how to get multiple url parameters from current url using java script

Question

I have 2 html pages, movies.html and single.html. I am passing few values from movies.html to single.html through href tag, so it goes along with the url and i can fetch it in single.html page. Below is the code :

movies.html:

    <a href="single.html?var1=abc&var2=xyz&var3=def">

So now after clicking on this href link in html page, single.html?var1=abc&var2=xyz&var3=def this whole thing comes in the url. My question is how to get values of var1, var2 and var3 using javascript.

I have used below code in single.html to fetch the parameters:

  var movieLink1 = window.location.href.split('?var1=')[1];
  var movieLink2 = window.location.href.split('&var2=')[1];
  var movieLink3 = window.location.href.split('&var3=')[1];

output :

  movieLink1 = var1=abc&var2=xyz&var3=def
  movieLink2 = var2=xyz&var3=def
  movieLink3 = var3=def

expected output :

movieLink1 = abc
movieLink2 = xyz
movieLink3 = def

I am not getting the expected output.

Basically abc, xyz and def are movie downloading links in my application, so if i click on movieLink1 button in single.html movie with 400p resolution should download, movieLink2 button should download 780p resolution movie and movieLink3 button should download 1080p resolution movie. In mobile its working fine but in laptop clicking on any button its downloading 1080p resolution movie. I am not getting what is the problem, If someone can help I will be very greatful for them.

Does this answer your question? How can I get query string values in JavaScript? — Eldar
– Eldar, Commented Jun 6, 2020 at 17:51

wiesson · Accepted Answer · 2020-06-06 17:53:41Z

2

You can use URLSearchParams

const searchParams = new URLSearchParams(window.location.search);

// access var1
const var1 = searchParams.get("var1");

answered Jun 6, 2020 at 17:53

wiesson

6,8436 gold badges43 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

theDavidBarton · Accepted Answer · 2020-06-06 18:59:06Z

1

URLSearchParams recommended by wiesson is the smoothest solution if you only need to support modern browsers but not Internet Explorer.

If you'd look for a solution that works in all browsers then you can use a match() method with a regex like /var{n}=(\w+)(\W|$)/, the search result under index 1 of the capturing groups will contain the desired parameter value.

example:

const movieLink1 = window.location.href.match(/var1=(\w+)(\W|$)/)[1]
const movieLink2 = window.location.href.match(/var2=(\w+)(\W|$)/)[1]
const movieLink3 = window.location.href.match(/var3=(\w+)(\W|$)/)[1]

output:

movieLink1 = abc
movieLink2 = xyz
movieLink3 = def

edited Jun 6, 2020 at 18:59

answered Jun 6, 2020 at 18:53

theDavidBarton

8,9414 gold badges32 silver badges56 bronze badges

Comments

Sven.hig · Accepted Answer · 2020-06-06 17:55:24Z

You can use this function to get the parameters

 const url= 'single.html?var1=abc&var2=xyz&var3=def'

    function getparams(url){
        const paramsobj={}

        if(url.includes('&')){
      const urlarray= url.split('?')
     const  parampairs =urlarray[1].split('&')
     parampairs.forEach(p => {
          const nwpair= p.split('=')
          paramsobj[nwpair[0]]=nwpair[1]
     });

    }
    if(!url.includes('&')){
        const urlarray= url.split('#')
          const keyvalue=urlarray[1].split('=')
        const arr=keyvalue
                let i=0
              while(i<arr.length+2) {
               key=keyvalue.shift()      
                value=keyvalue.shift()   
                paramsobj[key]=value
                      i++
              }    
    }
    return  paramsobj

    }
    params=getparams(url)
    console.log(params.var2)

Collectives™ on Stack Overflow

how to get multiple url parameters from current url using java script

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related