對(duì)于 URL，我們需要了解更多，因?yàn)槲覀兊拈_發(fā)中可能會(huì)需要提取URL的部分信息來做不同的事情，事實(shí)上這也是與后端交互的一種獨(dú)特的方式，當(dāng)然這肯定是安全的，當(dāng)請(qǐng)求被返回，關(guān)于 url 的信息就被記錄在了 Window 對(duì)象的 Location對(duì)象中，取值的結(jié)果并不隨著用戶手動(dòng)修改地址欄中的字符而發(fā)生任何改變，這一點(diǎn)是很重要的。了解了這些內(nèi)容，那么我們從下面這張圖開始吧：

圖片中間那一行較長的字符串是一個(gè)完整的 URL，它包含了一個(gè) URL 中可能包含的任何部分：協(xié)議、域名、端口號(hào)（當(dāng)然，大多數(shù)情況下，我們?cè)跒g覽網(wǎng)頁的時(shí)候并沒有看到端口號(hào)，因?yàn)樗浑[藏了，默認(rèn)就是80端口，你加上也不會(huì)有錯(cuò)）、路徑、參數(shù)、描點(diǎn)。在 JavaScript 中，獲取到這一行字符串的方法是訪問 window.location.href，href屬性包含了一個(gè)頁面完整的 URL。如果想得到 URL 中某一部分的值，我們可以通過復(fù)雜、繁瑣的正則表達(dá)式來解析這個(gè)完整的 URL，不過更方便的辦法是通過 location 的其他屬性來獲取。比如 location 的 protocol 屬性中記錄了帶冒號(hào)的協(xié)議名，pathname 屬性存儲(chǔ)著路徑名，這些屬性是 href 的分離，給開發(fā)者帶來了很多方便。下面的表格中羅列了 location 下所有的屬性，以及他們各自記錄的值。如果不能理解表格中的內(nèi)容，那么上面那張圖中的色塊和文字，形象地描述了各屬性在 URL 中對(duì)應(yīng)的位置。

屬性 值?

href 完整的 URL?

protocol 協(xié)議?

hostname 主機(jī)名?

host 主機(jī)名加端口號(hào)?

port 的端口號(hào)?

pathname 當(dāng)前 URL 的路徑部分?

search URL 的查詢部分?

hash #開始的錨

值得注意的是，上面的屬性都是可選的，這表示我們可以通過 JavaScript 改變他們的值。這些屬性大都一目了然非常簡單，唯有 search 部分是比較麻煩的，search部分是以 GET 方式傳給后臺(tái)的參數(shù)，以 ? 開始，& 作為分隔符，= 賦值的序列化的字符串，如此一來通過 location.search 得到的值往往并不是想要得到的最終結(jié)果，通過 search 的結(jié)構(gòu)來分析，我們可能更想要得到的結(jié)果是一個(gè)包含明確對(duì)應(yīng)關(guān)系的關(guān)聯(lián)數(shù)組。于是我們需要對(duì) location.search 中得到的字符串進(jìn)行進(jìn)一步的處理。

?

function?getArgs()?{?var?args?=?{};var?query?=?location.search.substring(1);//?Get?query?stringvar?pairs?=?query.split("&");?//?Break?at?ampersandfor(var?i?=?0;?i?<?pairs.length;?i++)?{var?pos?=?pairs[i].indexOf('=');//?Look?for?"name=value"if?(pos?==?-1)?continue;//?If?not?found,?skipvar?argname?=?pairs[i].substring(0,pos);//?Extract?the?namevar?value?=?pairs[i].substring(pos+1);//?Extract?the?valuevalue?=?decodeURIComponent(value);//?Decode?it,?if?neededargs[argname]?=?value;//?Store?as?a?property}return?args;//?Return?the?object?}

上面的代碼來自于《JavaScript 權(quán)威指南》一書中。getArgs 方法不接收參數(shù)，它主動(dòng)提取 URL 中的 search 部分加以解析，并返回一個(gè) JSON。例如我們最開始那張圖片中的 URL ，使用 getArgs 方法將會(huì)得到下面的結(jié)果：

var?search?=?{search:html }

這樣，關(guān)于 URL 的所有信息都能得到一個(gè)非常明確的結(jié)果，很簡單。

不過更推薦使用正則表達(dá)式來解析URL，其運(yùn)行效率更高，代碼也更加簡潔。

function?getArgs(){var?args?=?{};var?match?=?null;var?search?=?decodeURIComponent(location.search.substring(1));var?reg?=?/(?:([^&amp;]+)=([^&amp;]+))/g;while((match?=?reg.exec(search))!==null){args[match[1]]?=?match[2];}return?args; }.

轉(zhuǎn)載于:https://blog.51cto.com/ww123/1641422

總結(jié)

以上是生活随笔為你收集整理的JS获取URL中GET的参数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。