window.location.href or window.location.search

Question

我想从URL中提取查询字符串的值。

因此，在JavaScript中如何获取查询字符串的值？ 的最受欢迎的答案中使用了window.location.search。

使用window.location.href有问题吗？

我正在尝试根本上解决一个问题，有时在使用location.href时会得到空的查询字符串值。

- MockedMan.Object

Answer 1

这两个属性返回不同的内容:

href: 是一个包含整个URL的DOMString。

和:

search: 是一个包含'?'后面的URL参数的DOMString。也被称为“查询字符串”

因此，你可以使用其中之一，只需确保考虑到函数返回值之间的差异即可。如果你决定使用href属性，则需要先提取查询字符串部分（?后面的部分），然后将其拆分成多个部分。

- Darin Dimitrov

Answer 2

现在的浏览器有一个URLSearchParams类，可以帮助解析搜索参数。它已经在现代浏览器中存在了近4年: https://caniuse.com/?search=URLSearchParams

let queryParams = new URLSearchParams(window.location.search)
queryParams.set('page', '1')
queryParams.toString()
queryParams.get('page')
queryParams.delete('page')

- Kieran Pilkington

Answer 3

我使用

var qr={};
window.location.search.substring(1).split("&").forEach(p => { qr[p.split("=")[0]] = p.split("=")[1] })
//use
console.log(qr["sample"]);
//or
console.log(qr.sample);

- hossein sedighian

Answer 4

注意 - 如果没有location.href.search值，您将得到一个空字符串。

您可以使用浏览器的检查功能来查看值，探索页面的DOM - 任何页面都可以。

使用此过程可以了解有关DOM的许多信息 - 大多数人甚至都没有听说过。

打开检查器（具体取决于浏览器，但请尝试在页面上右键单击任何位置并检查您将看到的下拉菜单 - 可能会读取Inspect或Inspect Object）。

一旦打开检查器，请单击顶部菜单中的控制台。

对于Firefox，输入行（您可以在其中键入要探索DOM的内容）位于检查器窗口底部，并带有前缀>>

请注意 - Chrome会显示多行输入字段，Firefox仅显示单行字段。如果您有Chrome-使用它来检查事物，在键入某些内容并按Enter后，您想要的值将显示在您键入的内容下方，并将光标移动到下一个空白行，以便您可以输入其他内容。

Firefox允许您查看事物，但它很笨重且稍微难以使用。

在输入行或字段中，键入：

document.location.

显示文档位置（URL）的所有属性列表，具有自动填充功能，可帮助您。

例如：

document.location.search将显示URL中＃符号后面的任何文本

document.location.href将向您显示整个URL

document.location.host将向您显示URL的主机部分

尝试并查看列出的所有document.location属性，您将学习到很多关于document.location属性的知识。

您还可以键入window.并查看窗口对象的属性列表 - 其中之一是document。

与其输入document.location.href，不如通过键入window.document.location.href使其更难以输入。

它们产生相同的结果，因为始终假定顶部属性为window。

对于Firefox-在输入内容并按Enter后，结果将显示在输入行上方。要调出上次键入的内容以进行更改，请在光标位于输入行时按上箭头键。

使用Chrome - 如我上面所说，当您按下回车键时，该值将显示在您刚刚输入的行中，并且光标将移动到下一个空白行，您可以在其中输入另一个属性的名称以查看其值。

探索top和self - 您会发现它们是顶层窗口对象（如果页面上有多个框架-框架，而不是iframes）和当前窗口。

花一些时间探索window.self.top的属性将教您许多关于DOM（文档对象模型）的知识，这可能是您从未遇到过的。

如果您没有看到输入字段或行，请确保在检查器顶部菜单中单击“控制台”。

如果您决定使用document.location.href，则可以在JavaScript中编写它以获取值或设置值-您可以更改href并使浏览器转到另一个网页。

注意-其他答案之一说：

“如果您决定使用href属性，则需要先提取查询字符串部分（？后面的部分），然后再将其拆分成几个部分”

您无需拆分任何内容。探索document.location的所有属性，您会发现可以从位置字符串中获取哈希、搜索等已经“拆分”的值。

哈希是URL中井号（#）后面的值

搜索是URL中问号（?）后面的值

以下是其他需要注意的事项：

document.links
document.links[0]
document.URL
document.body

浏览DOM，你会学到很多。

- SimonT

Answer 5

我假设你知道 JavaScript 数组和一些方法

---

使用window.location.href

var url = 'site.com/seach?a=val0&b=val1'

分割 '?'

var someArray = url.split('?');

someArray 会变成 ['site.com/seach', 'a=1000&b=c'] 索引 0 是 window.location，索引 1 是查询字符串

var queryString = someArray[1];

进一步拆分 '&' ，以获得键值对

var keyValue = queryString.split('&');

keyVal 看起来是这样的 ['a=val0', 'b=val1'];

现在让我们获取键和值。

var keyArray=[], valArray=[];

循环遍历 keyValue 数组并拆分 '='，然后更新 keyArray 和 valArray

for(var i = 0; i < keyValue.length; i++){

key = keyValue[i].split('=')[0];

val = keyValue[i].split('=')[1];

keyArray.push(key);

valArray.push(val);

}

最后我们有了

keyArray = ['a', 'b'];

valArray = ['val0', 'val1'];

我们的完整代码如下。

var url = 'site.com/seach?a=val0&b=val1';

var someArray = url.split('?');

var queryString = someArray[1];

var keyValue = queryString.split('&');

var keyArray=[], valArray=[];

for(var i = 0; i < keyValue.length; i++){

key = keyValue[i].split('=')[0];

val = keyValue[i].split('=')[1];

keyArray.push(key);

valArray.push(val);

}

完成！

- Kim