如何用js擷取瀏覽器URL中查詢字串的參數

標籤：rip   str   tle   string   位置   image   技術   列表   java   

首先要知道Location這個對象以及這個對象中的一些屬性：

href:設定或返回完整的url.如本部落格首頁返回http://www.cnblogs.com/wymninja/

host:設定或返回主機名稱和當前的URL的連接埠號碼。本部落格首頁返回www.cnblogs.com

hostname:設定或返回當前URL的主機名稱。本部落格首頁返回www.cnblogs.com

hash:設定或返回從井號（#）開始的URL（錨）。本部落格首頁返回 空

pathname:設定或返回當前URL的路徑部分。本部落格首頁返回/wymninja/

port:設定或返回當前URL的連接埠號碼。本部落格首頁返回 空

protocol:設定或返回當前URL的協議。本部落格首頁返回 http:

search:設定或返回從問號 (?) 開始的 URL（查詢部分）

location對象屬性圖示:圖片來自慕課網

location的href屬性存放的是文檔的完整 URL，其他屬性則分別描述了 URL 的各個部分。這些屬性與 Anchor 對象（或 Area 對象）的 URL 屬性非常相似。當一個 Location 對象被轉換成字串，href 屬性的值被返回。這意味著你可以使用運算式 location 來替代 location.href。不過 Anchor 對象表示的是文檔中的超連結，Location 對象表示的卻是瀏覽器當前顯示的文檔的 URL（或位置）

var s = location.toString();console.log(s);#result//http://www.cnblogs.com/wymninja/

 

Location對象的這些屬性都是可讀可寫的，如果改變了文檔的location.href，則瀏覽器會載入新的頁面。同樣如果改變了location.hash，則頁面會跳轉到新的錨點，但此時頁面不會重載。

Location對象還有三個方法：assign()、reload()、replace()

assign():載入新的文檔

reload():可以重新裝載當前文檔

replace():可以裝載一個新文檔而無須為它建立一個新的記錄。也就是說，在瀏覽器的曆史列表中，新文檔將替換當前文檔。這樣就不能通過【返回】按鈕返回當前文檔了。

注意：

不要混淆Window對象的location屬性和Document對象的location對象。前者引用一個Location對象，後者只是一個 唯讀字串，並不具有Location對象的任何特性。Document.location與document.URL是同義的。但是，當存在伺服器重定 向時，document.location包含的是已經裝載的URL,而location.href包含的則是原始請求的文檔的URL。

所以要擷取瀏覽器URL中查詢字串的參數。也就是location.search部分。以慕課網圖片為例就是?courseid = 8&cahpterid = 86中的8和86！！！！然後就利用如下代碼：

function getQuery(name){　 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);//從?之後開始匹配如getQuery(courseid)返回一個數組["courseid=8","","8","&",index:0,input:"courseid=8"]
   if (r!=null) return unescape(r[2]); return null;}

其中:

對match不清楚可查閱我的部落格Javascript string對象

unescape 對參數進行解碼，如空格解碼為20%。

如何用js擷取瀏覽器URL中查詢字串的參數