Question

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

因此，使用How can I get query string values in JavaScript?中最受欢迎的答案 - window.location.search。

使用window.location.href是否有任何问题？

我正在尝试root导致问题，有时我在使用location.href

时会得到空的查询字符串值

Answer 1

2个属性返回不同的things：

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

和

搜索：DOMString是否包含＆＃39;？＆＃39;其次是参数 URL。也称为＆＃34; querystring＆＃34;

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

Answer 2

我使用

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

Answer 3

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

您可以使用浏览器的“检查”功能查看页面的DOM（任意页面）。

通过此过程，您可以学到很多有关DOM的知识-比大多数人甚至都了解的更多。

打开检查器（其方式取决于浏览器，但请尝试右键单击页面上的任意位置，然后检查您将看到的下拉菜单-它可能显示“检查”或“检查对象”。

打开检查器后，单击检查器框架顶部菜单中的控制台。

对于Foxfire，您可以在其中输入内容以探索DOM的输入行位于检查器窗口的底部，并以>>

为前缀

注意-Chrome向您显示一个多行输入字段，而Firefox仅向您显示一个行字段。如果您使用的是Chrome浏览器-使用它来检查事物，请在键入内容并按Enter后将在您键入的内容下显示所需的值，并且光标会移至下一个空白行，以便您可以输入其他内容。

Firefox允许您查看内容，但它笨重且难以使用。

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

document.location。

将显示文档位置（URL）的所有属性的列表，并自动填写以帮助您。

例如：

document.location.search将在URL中的＃号后面显示URL中的所有文本

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

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

进行实验并查看为document.location列出的所有属性，您将学到很多有关document.location的知识。属性。

您也可以键入窗口。并看到窗口对象属性的列表-其中一个将是document。

代替键入document.location.href，您可以通过键入window.document.location.href使其更难键入

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

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

使用Chrome-如上所述，当您按Enter键时，该值将显示在您刚刚键入的行中，并且光标将移至下一个空白行，您可以在其中输入其他属性的名称以查看内容它的价值是。

浏览顶部。和自我。 -您会找到顶部窗口对象（如果页面上有多帧-框架，而不是iframe）和当前窗口。

花一些时间探索窗口的属性。自。最佳。会教给您很多您可能从未遇到过的DOM（文档对象模型）的信息。

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

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

请注意-说了其他答案之一

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

您无需拆分任何内容。浏览document.location的所有属性，您会发现可以从位置字符串中“分离”散列，搜索等。

哈希是网址中井号（＃）后面的值

搜索是网址中问号（？）后面的值

还有其他需要注意的地方：

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

只需浏览DOM，您就会学到很多东西。

Answer 4

浏览器现在具有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')

Answer 5

假设你知道javascript数组和几个方法

使用 window.location.href

var url =＆＃39; site.com/seach？a = val0＆amp; b = val1＆＃39;

拆分＆＃39;？＆＃39;

var someArray = url.split（＆＃39;？＆＃39;）;

someArray看起来像这样[＆＃39; site.com/seach' ;,＆＃39; a = 1000＆amp; b = c＆＃39;] index 0是window.location，索引1是queryString

var queryString = someArray [1];

进一步分裂＆＃39;＆amp;＆＃39;所以你得到一个key = value

var keyValue = queryString.split（＆＃39;＆amp;＆＃39;）;

keyVal看起来像这样[＆＃39; a = val0＆＃39;，＆＃39; b = val1＆＃39;];

现在让我们获取密钥和值。

var keyArray = []，valArray = [];

遍历keyValue数组并拆分＆＃39; =＆＃39;更新keyArray和valArray

for（var i = 0; i＆lt; keyValue.length; i ++）{

key = keyValue [i] .split（＆＃39; =＆＃39;）[0];

val = keyValue [i] .split（＆＃39; =＆＃39;）[1];

keyArray.push（键）;

valArray.push（VAL）;

}

最后我们有

keyArray = [＆＃39; a＆＃39;，＆＃39; b＆＃39;];

valArray = [＆＃39; val0＆＃39;，＆＃39; val1＆＃39;];

我们的完整代码如下所示。

var url =＆＃39; site.com/seach？a = val0＆amp; b = val1＆＃39;;