javascript獲取url引數值的幾種方法

獲取URL某個引數的值，是web開發中非常高頻的操作，很多js類庫都會提供相應的工具函式。

1 字串切割

我最早使用的是大神 Nicholas C。Zakas（Human Who Codes – The official website of Nicholas C。 Zakas）在《JavaScript高階程式設計》裡提供的版本：

function getQueryStringArgs（）{ //取得查詢字串並去掉開頭的問號 var qs = （location。search。length > 0 ？ location。search。substring（1）： “”）， //儲存資料的物件 args = {}， //取得每一項 items = qs。length ？ qs。split（“&”）：［］， item = null， name = null， value = null， //在for 迴圈中使用 i = 0， len = items。length； //逐個將每一項新增到args 物件中 for （i=0； i < len； i++）{ item = items［i］。split（“=”）； name = decodeURIComponent（item［0］）； value = decodeURIComponent（item［1］）； if （name。length） { args［name］ = value； } } return args；}

這個函式的第一步是先去掉查詢字串開頭的問號。當然，前提是 location。search 中必須要包含一或多個字元。然後，所有引數將被儲存在args 物件中，該物件以字面量形式建立。接下來，根據和號（&）來分割查詢字串，並返回name=value 格式的字串陣列。下面的for 迴圈會迭代這個陣列，然後再根據等於號分割每一項，從而返回第一項為引數名，第二項為引數值的陣列。再使用decodeURIComponent（）分別解碼name 和value（因為查詢字串應該是被編碼過的）。最後，將name 作為args 物件的屬性，將value 作為相應屬性的值。下面給出了使用這個函式的示例。

//假設查詢字串是？q=javascript&num=10var args = getQueryStringArgs（）；alert（args［“q”］）； //“javascript”alert（args［“num”］）； //“10”

可見，每個查詢字串引數都成了返回物件的屬性。這樣就極大地方便了對每個引數的訪問。

2 正則匹配

字元切割版本的程式碼結構清晰，就是程式碼量稍多了一些。

觀察URL引數字串，如？q=javascript&num=10，”？”或”&”之後，”=”之前是引數名，”=”號之後是值，可用正則表示式匹配快速匹配出來。

function getQueryString（ field， url ） { var href = url ？ url ： window。location。href； var reg = new RegExp（ ‘［？&］’ + field + ‘=（［^&］*）’， ‘i’ ）； var string = reg。exec（href）； return string ？ string［1］： null；}；

雖然該方法只能返回單個引數值，但程式碼量確實變少了。

3 瀏覽器URL（）和 URLSearchParams（）方法

現在，高階瀏覽器已經有了內建的API介面可以對URL進行處理，這個API就是URLSearchParams（）以及URL（）。

URLSearchParams 介面定義了一些實用的方法來處理 URL 的查詢字串。

var paramsString = “q=URLUtils。searchParams&topic=api”var searchParams = new URLSearchParams（paramsString）；for （let p of searchParams） { console。log（p）；}searchParams。has（“topic”） === true； // truesearchParams。get（“topic”） === “api”； // truesearchParams。getAll（“topic”）； // ［“api”］searchParams。get（“foo”） === null； // truesearchParams。append（“topic”， “webdev”）；searchParams。toString（）； // “q=URLUtils。searchParams&topic=api&topic=webdev”searchParams。set（“topic”， “More webdev”）；searchParams。toString（）； // “q=URLUtils。searchParams&topic=More+webdev”searchParams。delete（“topic”）；searchParams。toString（）； // “q=URLUtils。searchParams”

URL（）建構函式返回一個新建立的 URL 物件，表示由一組引數定義的 URL。

url = new URL（url，［base］）

URL 介面的searchParams屬性返回一個URLSearchParams物件，從這個物件中能獲取到URL中的GET引數。

searchParams用於訪問url中的查詢引數。比如http：//localhost？a=1&b=2，searchParams等於{a： 1， b： 2}。

根據這兩個介面，引數獲取變得非常簡單：

var url_string = “http：//www。example。com/t。html？a=1&b=3&c=m2-m3-m4-m5”； //window。location。hrefvar url = new URL（url_string）；var c = url。searchParams。get（“c”）；console。log（c）；

參考資料

URL（） – Web API 介面參考 | MDN

URLSearchParams – Web API 介面參考 | MDN

How to get the value of a query string with native JavaScript | Go Make Things

javascript – How to get the value from the GET parameters？ – Stack Overflow

javascript獲取url引數值的幾種方法

相關文章