blocks|key|2190398|text|这两个属性返回不同的things|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2190399|URL+:是一个包含整个|2190400|的DOMString。|blockquote|2190401|2190402|2190403|和：|2190404|2190405|搜索:+DOMString是否包含'?‘后跟URL的参数。也称为"querystring“|2190406|2190407|2190408|所以你可以使用其中的一个，只要确保在你的函数中考虑到返回值之间的差异。如果决定使用href属性，则需要首先提取查询字符串部分(?之后的部分)，然后再将其拆分成多个部分。|2190409|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Location^0|A|6|A|6|0|0|0|0|0|0|0|0|0|0|0|15|4|1R|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1D|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]|$1|P|3|Q|5|J|7|1F|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1I|8|@$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

The 2 properties return different <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location" rel="noreferrer"><code>things</code></a>:

<blockquote>
 href: Is a DOMString containing the whole URL.
</blockquote>

and:

<blockquote>
 search: Is a DOMString containing a '?' followed by the parameters of
 the URL. Also known as "querystring"
</blockquote>

So you could use one or the other, just make sure to account for the differences between the returned values in your function. If you decide to use the <code>href</code> property you will need to first extract the query string part (the part after the <code>?</code>) before splitting it into pieces.

blocks|key|5250994|text|我使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5250995|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);|code-block|syntax|javascript|5250996|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

i use 

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

blocks|key|5251047|text|浏览器现在有一个URLSearchParams类，可以帮助解析搜索参数。它在现代浏览器中已经存在将近4年了：https://caniuse.com/?search=URLSearchParams|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5251048|let+queryParams+=+new+URLSearchParams(window.location.search)
queryParams.set('page',+'1')
queryParams.toString()
queryParams.get('page')
queryParams.delete('page')|code-block|syntax|javascript|5251049|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/?search=URLSearchParams^0|1I|17|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Browsers now have a URLSearchParams class that can help to parse search params. It has been around in modern browsers for almost 4 years now: <a href="https://caniuse.com/?search=URLSearchParams" rel="nofollow noreferrer">https://caniuse.com/?search=URLSearchParams</a>
<pre class="lang-js prettyprint-override"><code>let queryParams = new URLSearchParams(window.location.search)
queryParams.set('page', '1')
queryParams.toString()
queryParams.get('page')
queryParams.delete('page')
</code></pre>

blocks|key|2184084|text|注意-如果没有location.href.search值，你将得到一个空字符串。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2184085|您可以使用浏览器的Inspect特性来查看值，从而探索页面的DOM+--任何页面。|2184086|使用这个过程，您可以学到很多关于DOM的知识--比大多数人听说的都要多。|2184087|打开检查器(如何打开取决于浏览器，但尝试右键单击页面上的任意位置并检查您将看到的下拉菜单-它可能显示为Inspect或Inspect+Object。|2184088|打开检查器后，单击检查器框架顶部菜单中的console。|2184089|对于Foxfire，可以在其中键入内容以浏览DOM的输入行位于检查器窗口的底部，并以>>为前缀|2184090|注意--+Chrome显示了一个多行的输入域，而Firefox只显示了一个单行域。如果你有Chrome+-使用它来检查东西，在你键入一些东西并按Enter键后，你想要的值将显示在你键入的内容下，光标向下移动到下一个空行，这样你就可以输入其他东西了。|2184091|Firefox允许你查看东西，但它很笨重，而且使用起来有点困难。|2184092|在输入行或字段中，键入：|2184093|document.location。|2184094|将显示文档位置(+URL)的所有属性的列表，并自动填充以帮助您。|2184095|例如：|2184096|document.location.search将显示URL中#符号后面的任何文本|2184097|document.location.href将向您显示整个网址|2184098|document.location.host将向您显示URL的主机部分|2184099|尝试并查看为document.location列出的所有属性，您将对document.location有更多的了解。属性。|2184100|您也可以键入window。并查看窗口对象的属性列表-其中之一将是document。|2184101|您可以通过输入window.document.location.href来使输入变得更加困难，而不是输入document.location.href|2184102|它们产生相同的结果，因为top属性总是被假定为window。|2184103|对于Firefox+-在您键入内容并按enter后，结果将显示在输入行的上方。要调出您上次键入的内容，以便更改它，请在光标位于输入行时按向上箭头键。|2184104|使用Chrome+-正如我上面所说的，当你按enter时，值将显示在你刚刚输入的行上，光标将向下移动到下一个空行，在那里你可以输入另一个属性的名称来查看它的值是什么。|2184105|探索顶部。和自我。%2B你会发现顶部的窗口对象(如果页面上有多个框架，而不是iframe)和当前窗口。|2184106|花一些时间探索window的属性。自我。顶部。我将教给您很多关于DOM+(文档对象模型)的知识，这些知识您可能从未接触过。|2184107|如果您没有看到输入域或输入行，请确保在检查器顶部菜单中单击Console。|2184108|比方说，如果你决定使用document.location.href，你可以在你的JavaScript中像这样编写代码来获取或设置值--你可以改变href，让浏览器转到另一个网页。|2184109|注意--另一个答案是|2184110|“如果决定使用href属性，则需要先提取查询字符串部分(？之后的部分)，然后再将其拆分为多个部分。”|2184111|你不需要拆分任何东西。探索document.location的所有属性，您将看到您可以从位置字符串中获得散列、搜索等已经“分离”出来的内容。|2184112|哈希是URL中井号(#)后的值|2184113|搜索是问号(?)后的值在URL中|2184114|以下是其他一些需要查看的内容：|2184115|document.links
document.links[0]
document.URL
document.body|code-block|syntax|javascript|2184116|只需浏览DOM+-您将学到很多东西。|2184117|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|28|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|29|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|2A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|2B|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|2C|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|2D|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|2E|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|2F|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|2G|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|2H|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|2I|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|2J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2K|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2L|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|2M|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2N|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2O|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2P|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2R|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|2S|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|2T|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|2V|8|@]|9|@]|A|$]]|$1|1L|3|1M|5|6|7|2W|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|2X|8|@]|9|@]|A|$]]|$1|1P|3|1Q|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1R|3|1S|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|1T|3|1U|5|6|7|30|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|6|7|31|8|@]|9|@]|A|$]]|$1|1X|3|1Y|5|6|7|32|8|@]|9|@]|A|$]]|$1|1Z|3|20|5|21|7|33|8|@]|9|@]|A|$22|23]]|$1|24|3|25|5|6|7|34|8|@]|9|@]|A|$]]|$1|26|3|-4|5|6|7|35|8|@]|9|@]|A|$]]]|27|$]]

Note - if there is not location.href.search value you will get a null string.

You can explore the DOM of a page - any page - using a browser's Inspect feature to look at values.

You can learn a lot about the DOM using this procedure - more than most every even hear about.

Open the inspector (how depends on the browser but try right clicking anywhere on the page and check the drop down menu that you'll see - it may read Inspect or Inspect Object.

Once the inspector is open, click on console in the menu at the top of the inspector frame.

For Foxfire, the input line, where you can type in things to explore the DOM is at the bottom of the inspector window and is prefixed with >>

Note - Chrome shows you a multi-line input field, Firefox only a one line field. If you have Chrome - use it to inspect things, after you type something and press Enter the value you want will be displayed under what you type and the cursor moved down to the next blank line so you can enter something else.

Firefox allows you to view things but it clunky and a tad harder to use.

Into the input line or field, type:

document.location.

A list of all the properties for the location of the document (the URL) will be displayed and it has auto fill in to help you.

For example:

document.location.search will show any text in the URL following the # sign in the URL

document.location.href will show the you the entire URL

document.location.host will show you the host part of the URL

Experiment and look at all the properties listed for document.location and you'll learn quite about bit about the document.location. property.

You can also type window. and see a list of the window object's property - one of which will be document.

Instead of typing document.location.href you could make it harder to type by typing window.document.location.href

They produce the same results because the top property is always assumed to be window.

For Firefox - After you type something and hit enter, the results will be displayed above the input line. To bring up what you last typed, so you can change it, press the up arrow key wile the cursor is in the input line.

With Chrome - as I said above, when you press enter, the value will be displayed the line you just typed and the cursor will be moved down to the next blank line where you can enter the name of another property to see what it's value is.

Explore top. and self. - you'll find the are the top window object (if there are multi-frames on the page - frames, not iframes) and the current window.

Spending some time exploring the properties of window. self. top. will teach you a lot about the DOM (Document Object Model) that you might not ever come across.

If you don't seen an input field or line, make sure you click Console in the inspector top menu.

If you decided to use, say, document.location.href you will code it like that in your JavaScript to get the value or to set the value - you can change the href and have the browser go to another web page.

Note - one of the other answers said

"If you decide to use the href property you will need to first extract the query string part (the part after the ?) before splitting it into pieces"

You need not split anything off. Explore all of the properties of document.location and you'll see that you can get the hash, search, etc. already "split off" from the location string.

Hash is the value after a pound sign (#) in the URL

Search is the value after a question mark (?) in the URL

Here are some other things to look at:

<pre><code>document.links
document.links[0]
document.URL
document.body
</code></pre>

Just browse through the DOM - you will learn a lot.

blocks|key|275829|text|我假设你知道javascript数组和一些方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|275830|275831|使用window.location.href|offset|length|style|BOLD|275832|var+url+=+'site.com/seach?a=val0&b=val1‘|275833|拆分“？”|275834|var+someArray+=+url.split('?')；|275835|someArray看起来像'site.com/seach'，'a=1000&b=c‘索引0是window.location，索引1是queryString|275836|SomeArray1+queryString+=+var；|275837|进一步拆分'&‘，这样你就得到了一个key=value|275838|var+keyValue+=+queryString.split('&')；|275839|keyVal看起来像'a=val0'，'b=val1'；|275840|现在让我们获取键和值。|275841|ValArray=[]，var+[]；|275842|循环遍历keyValue数组并拆分更新keyArray和valArray|275843|对于(var+i=+0；i<+keyValue.length；i%2B%2B){|275844|key+=+keyValuei.split('=')；|275845|val+=+keyValuei.split('=')1；|275846|KeyArray.push(密钥)；|275847|valArray.push(val)；|275848|}|275849|我们终于有了|275850|keyArray+=+'a'，'b'；|275851|valArray+=+'val0'，'val1'；|275852|我们的完整代码如下所示。|275853|var+url+=+'site.com/seach?a=val0&b=val1'；|275854|var+someArray+=+url.split('?')；|275855|SomeArray1+queryString+=+var；|275856|var+keyValue+=+queryString.split('&')；|275857|ValArray=[]，var+[]；|275858|对于(var+i=+0；i<+keyValue.length；i%2B%2B){|275859|key+=+keyValuei.split('=')；|275860|val+=+keyValuei.split('=')1；|275861|275862|275863|275864|完成了！|275865|entityMap^0|0|0|2|K|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]|$1|C|3|D|5|6|7|2D|8|@$E|2E|F|2F|G|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|2G|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|2H|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|2I|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|2J|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|2K|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|2L|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|2M|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|2N|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2O|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2P|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|2R|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2S|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|2T|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2V|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2W|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|2X|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|30|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|31|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|32|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|6|7|33|8|@]|9|@]|A|$]]|$1|1U|3|1V|5|6|7|34|8|@]|9|@]|A|$]]|$1|1W|3|1X|5|6|7|35|8|@]|9|@]|A|$]]|$1|1Y|3|1Z|5|6|7|36|8|@]|9|@]|A|$]]|$1|20|3|21|5|6|7|37|8|@]|9|@]|A|$]]|$1|22|3|23|5|6|7|38|8|@]|9|@]|A|$]]|$1|24|3|1B|5|6|7|39|8|@]|9|@]|A|$]]|$1|25|3|1D|5|6|7|3A|8|@]|9|@]|A|$]]|$1|26|3|1F|5|6|7|3B|8|@]|9|@]|A|$]]|$1|27|3|28|5|6|7|3C|8|@]|9|@]|A|$]]|$1|29|3|-4|5|6|7|3D|8|@]|9|@]|A|$]]]|2A|$]]

Am assuming you know javascript array and few method

<hr>

Use the window.location.href

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

split the '?' 

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

The someArray looks like this ['site.com/seach', 'a=1000&amp;b=c']
index 0 is the window.location and index 1 is queryString

var queryString = someArray[1];

Go futher a split '&amp;' so u get a key=value

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

keyVal looks like this ['a=val0', 'b=val1'];

Now lets get keys and values.

var keyArray=[], valArray=[];

Loop through the keyValue array and split '=' the update keyArray and valArray

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

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

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

keyArray.push(key);

valArray.push(val);

}

Finally we have

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

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

Our full codes looks like this.

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

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

var queryString = someArray[1];

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

var keyArray=[], valArray=[];

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

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

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

keyArray.push(key);

valArray.push(val);

}

DONE!

I want to extract out the query string values from the URL. 

So, in the most upvoted answer in <a href="https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript">How can I get query string values in JavaScript?</a> - <code>window.location.search</code> is used.

Is there any problem in using <code>window.location.href</code>?

I am trying to root cause a problem where in sometimes I am getting empty query string value when using <code>location.href</code>

window.location.href or window.location.search

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我想从URL中提取查询字符串值。因此，在中最受欢迎的答案是- window.location.search。使用window.location.href有什么问题吗？我试图找出问题的根源，在使用location.href时，有时我会得到空的查询字符串值

问window.location.href或window.location.search
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问window.location.href或window.location.searchEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问window.location.href或window.location.search
EN