對于 URL，我們需要了解更多，因為我們的開發中可能會需要提取URL的部分信息來做不同的事情，事實上這也是與后端交互的一種獨特的方式，當然這肯定是安全的，當請求被返回，關于 url 的信息就被記錄在了 Window 對象的 Location對象中，取值的結果并不隨著用戶手動修改地址欄中的字符而發生任何改變，這一點是很重要的。了解了這些內容，那么我們從下面這張圖開始吧：

圖片中間那一行較長的字符串是一個完整的 URL，它包含了一個 URL 中可能包含的任何部分：協議、域名、端口號（當然，大多數情況下，我們在瀏覽網頁的時候并沒有看到端口號，因為他被隱藏了，默認就是80端口，你加上也不會有錯）、路徑、參數、描點。在 JavaScript 中，獲取到這一行字符串的方法是訪問 window.location.href，href屬性包含了一個頁面完整的 URL。如果想得到 URL 中某一部分的值，我們可以通過復雜、繁瑣的正則表達式來解析這個完整的 URL，不過更方便的辦法是通過 location 的其他屬性來獲取。比如 location 的 protocol 屬性中記錄了帶冒號的協議名，pathname 屬性存儲著路徑名，這些屬性是 href 的分離，給開發者帶來了很多方便。下面的表格中羅列了 location 下所有的屬性，以及他們各自記錄的值。如果不能理解表格中的內容，那么上面那張圖中的色塊和文字，形象地描述了各屬性在 URL 中對應的位置。

屬性 值?

href 完整的 URL?

protocol 協議?

hostname 主機名?

host 主機名加端口號?

port 的端口號?

pathname 當前 URL 的路徑部分?

search URL 的查詢部分?

hash #開始的錨

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

?

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 權威指南》一書中。getArgs 方法不接收參數，它主動提取 URL 中的 search 部分加以解析，并返回一個 JSON。例如我們最開始那張圖片中的 URL ，使用 getArgs 方法將會得到下面的結果：

var?search?=?{search:html }

這樣，關于 URL 的所有信息都能得到一個非常明確的結果，很簡單。

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

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; }.

轉載于:https://blog.51cto.com/ww123/1641422

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。