window.location.href 或 window.location.search

Question

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

因此，在How can I get query string values in JavaScript? 中最受好评的答案中使用了window.location.search。

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

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

Answer 1

这两个属性返回不同的things：

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

和：

搜索：DOMString 是否包含“？”其次是参数 网址。也称为“查询字符串”

所以你可以使用其中一个，只要确保考虑到函数中返回值之间的差异。如果您决定使用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

浏览器现在有一个 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 4

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

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

您可以使用这个过程学到很多关于 DOM 的知识 - 比大多数人都听说过的还要多。

打开检查器（具体方式取决于浏览器，但请尝试右键单击页面上的任意位置并检查您将看到的下拉菜单 - 它可能显示为 Inspect 或 Inspect Object。

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

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

为前缀

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

Firefox 允许您查看内容，但它笨重且使用起来有点困难。

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

文档.位置。

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

例如：

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

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

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

实验并查看为 document.location 列出的所有属性，您将了解有关 document.location 的一些信息。属性。

您也可以键入窗口。并查看窗口对象的属性列表 - 其中之一将是文档。

您可以通过键入 window.document.location.href 来增加键入难度，而不是键入 document.location.href

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

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

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

探索顶部。和自我。 - 您会发现顶部窗口对象（如果页面上有多框架 - 框架，而不是 iframe）和当前窗口。

花一些时间探索 window.properties 的属性。自己。最佳。将教给您很多关于 DOM（文档对象模型）的知识，您可能从未接触过。

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

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

注意 - 其他答案之一说

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

你不需要分割任何东西。探索 document.location 的所有属性，您会发现您可以从位置字符串中“拆分”出哈希、搜索等。

哈希是 URL 中井号 (#) 后的值

搜索是 URL 中问号 (?) 后面的值

还有一些其他值得关注的地方：

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

只需浏览 DOM - 你会学到很多东西。

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 是 queryString

var queryString = someArray[1];

进一步拆分'&'，这样你就得到了一个key=value

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

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

现在让我们获取键和值。

var keyArray=[], valArray=[];

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

for(var i = 0; 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

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

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

keyArray.push(key);

valArray.push(val);

}

完成！