使用JavaScript获取URL参数

Question

我尝试获取URL参数 nr，但始终得到 false。

var url = window.location.href;
let params = new URLSearchParams(url.search);
let nr = params.has('nr')

这个错误是什么？

- test1

---

你要解析的URL是什么？ - Bravo

请分享 window.location.href。 - Sid

顺便提一下，.has() 方法会返回一个布尔值而不是参数本身。如果你需要获取参数本身，需要使用 get() 方法。请参考文档。 - SakisTsalk

你好， 这里是http://xxxxx/cocktail?nr=1 - test1

如果您想保护隐私，可以省略真实主机名，重要的部分在主机名之后。 - Bravo

Answer 1

使用

var url = window.location;
let params = new URLSearchParams(url.search);
let nr = params.has('nr')

因为window.location是一个带有.search属性的Location对象

而window.location.href是一个字符串，没有.search属性

因此你的url.search是undefined

我可以用与Location类似的URL来演示这一点

let loc = new URL('http://example.com/?nr=1');

// loc is a placeholder for your window.location

let url = loc.href;

// here, url.search would be window.location.href.search
let params = new URLSearchParams(url.search);
let nr = params.has('nr')
console.log(nr);

url = loc;

// here, url.search would be window.location.search
params = new URLSearchParams(url.search);
nr = params.has('nr')
console.log(nr);

- Bravo

Answer 2

以下函数将返回URL中所有参数的数组。

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

参考来源自https://dev59.com/EXNA5IYBdhLWcg3wZ85R#20097994

- shotgun02

---

只有在需要支援Internet Explorer時才是一個好的答案。 - Bravo

Answer 3

来自 https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

URLSearchParams 构造函数不会解析完整的 URL。但是，如果存在，则会从字符串中删除初始的 ?。

因此，您应该只提供查询参数字符串。

例如，如果您的 window.location.href 是

https://dev59.com/acHqa4cB1Zd3GeqPyF1U?query=1&query_1=2&many_queries=3

然后，您应该仅将URLSearchParams类传递给查询参数，即 query=1&query_1=2&many_queries=3

- Sid