如何使用 java 脚本从当前 url 获取多个 url 参数

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.

Answer 1

You can use URLSearchParams

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

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

Answer 2

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

Answer 3

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)