JavaScript獲取URL參數(shù)常見的4種方法
前言
在前端開發(fā)中,處理URL參數(shù)是一個常見的任務(wù),尤其是在沒有框架支持的情況下。雖然許多框架提供了方便的方法來獲取URL參數(shù),但有時我們需要依賴原生JavaScript來完成這個任務(wù)。這也是面試中經(jīng)常出現(xiàn)的問題之一。今天讓我們一起來探討如何利用原生JavaScript來獲取URL參數(shù)值。
獲取方法總結(jié)
原生JS獲取URL鏈接參數(shù)的方法有好幾種,我們一起來學(xué)習(xí)一下常見的幾種。
1.使用正則表達式
2.利用a標簽內(nèi)置方法
3.利用split分割方法
4.使用URLSearchParams方法
具體實現(xiàn)
方法一: 正則表達式
function queryURLParams(url, paramName) { // 正則表達式模式,用于匹配URL中的參數(shù)部分。正則表達式的含義是匹配不包含 ?、&、= 的字符作為參數(shù)名,之后是等號和不包含 & 的字符作為參數(shù)值 let pattern = /([^?&=]+)=([^&]+)/g; let params = {}; // match用于存儲正則匹配的結(jié)果 let match; // while 循環(huán)和正則表達式 exec 方法來迭代匹配URL中的參數(shù) while ((match = pattern.exec(url)) !== null) { // 在字符串url中循環(huán)匹配pattern,并對每個匹配項進行解碼操作,將解碼后的鍵和值分別存儲在key和value變量中 let key = decodeURIComponent(match[1]); let value = decodeURIComponent(match[2]); if (params[key]) { if (Array.isArray(params[key])) { params[key].push(value); } else { params[key] = [params[key], value]; } } else { // 參數(shù)名在 params 對象中不存在,將該參數(shù)名和對應(yīng)的值添加到 params 對象中 params[key] = value; } } if (!paramName) { // 沒有傳入?yún)?shù)名稱, 返回含有所有參數(shù)的對象params return params; } else { if (params[paramName]) { return params[paramName]; } else { return ''; } } } let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100&name=lion"; console.log(queryURLParams(url)); // 返回所有參數(shù)對象 console.log(queryURLParams(url, 'name')); // 返回參數(shù)名為 'name' 的所有值 console.log(queryURLParams(url, 'age')); // 返回參數(shù)名為 'age' 的值 console.log(queryURLParams(url, 'color')); // 返回""
正則表達式解釋:
([^?&=]+)
:這部分是一個捕獲組,表示匹配不包含?
、&
、=
的任意字符的一個或多個,即匹配參數(shù)名部分。=
:表示匹配參數(shù)名和參數(shù)值之間的等號。([^&]+)
:這部分也是一個捕獲組,表示匹配不包含&
的任意字符的一個或多個,即匹配參數(shù)值部分。g
:表示使用全局匹配模式,即匹配目標字符串中所有符合模式的部分。
方法二: 利用a標簽
a標簽內(nèi)置的方法能夠快速且方便地獲取URL參數(shù),
它的原理主要就是利用了a標簽得到一些內(nèi)置屬性,如href、hash、search等屬性。
考慮到URL中的哈希部分,在函數(shù)queryURLParams(url)
中,會檢查URL中的哈希部分是否存在,如果存在則將哈希值存儲到參數(shù)對象中,并將屬性名設(shè)置為"HASH"。這樣在返回的參數(shù)對象中,如果URL中有哈希部分,就可以通過"HASH"來訪問哈希值。
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig" function queryURLParams(url) { // 1.創(chuàng)建a標簽 let link = document.createElement('a'); link.href = url; let searchUrl = link.search.substr(1); // 獲取問號后面字符串 let hashUrl = link.hash.substr(1); // 獲取#后面的值 let obj = {}; // 聲明參數(shù)對象 // 2.向?qū)ο笾羞M行存儲 hashUrl ? obj['HASH'] = hashUrl : null; // #后面是否有值 let list = searchUrl.split("&"); for (let i = 0; i < list.length; i++) { let arr = list[i].split("="); obj[arr[0]] = arr[1]; } return obj; } console.log(queryURLParams(URL))
上段代碼中先創(chuàng)建了一個a標簽,然后就可以根據(jù)a標簽的屬性分別得到url的各個部分了,這其實和Vue的路由跳轉(zhuǎn)獲取參數(shù)有點類似。
1. 將傳入的URL賦值給 `<a>` 標簽的 `href` 屬性的目的是利用瀏覽器提供的原生 API 來幫助實現(xiàn) URL 參數(shù)的解析。通過將URL賦值給 `<a>` 標簽的 `href` 屬性,瀏覽器會自動解析這個URL,包括提取其中的協(xié)議、主機、路徑、查詢參數(shù)等各個部分,從而方便我們對這個URL進行進一步的操作。
2. 通過`link.search.substr(1)`和`link.hash.substr(1)`可以獲取URL中問號后面的字符串和`#`后面的值,是因為瀏覽器在解析URL后會將這些信息存儲在`<a>`標簽對象的對應(yīng)屬性中。具體來說:
- `link.search` 包含了 URL 中問號后面的部分(即查詢參數(shù)部分)。
- `link.hash` 包含了 URL 中`#`后面的部分(即片段部分)。
- 使用`substr(1)`是為了去掉字符串中的問號或`#`字符,只留下真正的參數(shù)內(nèi)容或片段內(nèi)容。
方法三: split分割法
這種方法利用了split可以以某個字符講字符串分割為數(shù)組的特點,巧妙地將各個參數(shù)分割出來。
function getUrlParams(url, paramName) { // 從 URL 中提取查詢參數(shù)部分 const queryString = url.split('?')[1]; // 如果沒有查詢參數(shù),返回空對象 if (!queryString) { return {}; } // 處理帶有 hash 地址的情況 const hashIndex = queryString.indexOf('#'); if (hashIndex !== -1) { queryString = queryString.substring(0, hashIndex); } // 將查詢參數(shù)字符串解析為鍵值對 const queryParams = {}; queryString.split('&').forEach(param => { const [key, value] = param.split('='); // 如果值已經(jīng)存在,則將其轉(zhuǎn)換為數(shù)組存儲 if (queryParams[key]) { if (Array.isArray(queryParams[key])) { queryParams[key].push(decodeURIComponent(value)); } else { queryParams[key] = [queryParams[key], decodeURIComponent(value)]; } } else { queryParams[key] = decodeURIComponent(value); } }); // 如果沒有指定參數(shù)名稱,則返回包含所有查詢參數(shù)的對象 if (!paramName) { return queryParams; } // 如果指定了參數(shù)名稱 if (queryParams[paramName]) { return queryParams[paramName]; } else { // 參數(shù)不存在,返回空字符串 return ''; } } // 示例 URL const url = 'https://example.com?name=John&age=30&name=Jane&gender=male'; const urlWithHash = 'http://xxx.com/#/operations/app?name=John&age=30&name=Jane&gender=male'; console.log(getUrlParams(url)); // 輸出: { name: ['John', 'Jane'], age: '30', gender: 'male' } console.log(getUrlParams(url, 'name')); // 輸出: ['John', 'Jane'] console.log(getUrlParams(url, 'age')); // 輸出: '30' console.log(getUrlParams(url, 'city')); // 輸出: '' console.log(getUrlParams(urlWithHash)); // 輸出: { name: ['John', 'Jane'], age: '30', gender: 'male' }
關(guān)于hash地址部分
在處理 URL 查詢參數(shù)時,通常情況下不需要處理 hash 地址部分。
Hash 地址通常用于客戶端路由或頁面內(nèi)導(dǎo)航,一般不會包含查詢參數(shù)信息。
但在某些情況下,可能需要處理帶有 hash 地址的 URL,例如:
1. 當(dāng)需要從 URL 中提取查詢參數(shù)時,如果 URL 中的查詢參數(shù)部分后面緊跟著 hash 地址(如 `http://example.com/page?name=John#section2`),需要排除 hash 部分以確保正確提取查詢參數(shù)。
2. 如果要監(jiān)聽 hash 地址的變化,并根據(jù)不同的 hash 地址執(zhí)行不同的邏輯(如單頁面應(yīng)用路由器),則需要處理 hash 地址的改變并做出響應(yīng)。 總的來說,在處理 URL 查詢參數(shù)時一般不需要處理 hash 地址部分,但在特定情況下需要注意并處理。
方法四: URLSearchParams
URLSearchParams方法能夠讓我們非常方便的獲取URL參數(shù),但是存在一定的兼容性問題,官網(wǎng)的解釋如下:
URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串。
該接口提供了非常的的方法讓我們來處理URL參數(shù),這里我們只介紹如何獲取URL參數(shù)值,更加詳細的使用方法大家可以參考官網(wǎng)。
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100" function queryURLParams(URL) { let url = URL.split("?")[1]; const urlSearchParams = new URLSearchParams(url); const params = Object.fromEntries(urlSearchParams.entries()); return params } console.log(queryURLParams(URL))
這里我們基本上只用了兩行主要代碼就實現(xiàn)了參數(shù)的解析。需要注意的是urlSearchParams.entries()返回的是一個迭代協(xié)議iterator,所以我們需要利用Object.fromEntries()方法將把鍵值對列表轉(zhuǎn)換為一個對象。
關(guān)于迭代協(xié)議,大家可以參考官網(wǎng):迭代協(xié)議
總結(jié):
這里介紹了四種方法來實現(xiàn)URL鏈接參數(shù)值的解析,其中使用最為廣泛的應(yīng)該當(dāng)屬split分割法。總的來說,了解和掌握這些方法可以幫助前端開發(fā)者更有效地處理URL參數(shù),從而提升開發(fā)效率和應(yīng)對面試中可能出現(xiàn)的相關(guān)問題。
到此這篇關(guān)于JavaScript獲取URL參數(shù)常見的4種方法的文章就介紹到這了,更多相關(guān)JS獲取URL參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 使用JavaScript解析URL參數(shù)為對象的多種方法
- JavaScript 獲取 URL 中參數(shù)值的方法
- JavaScript 獲取 URL 中參數(shù)值的方法詳解(最新整理)
- JavaScript獲取URL中參數(shù)值的四種方法
- JavaScript獲取當(dāng)前頁面url參數(shù)的方法詳解
- JavaScript實現(xiàn)獲取URL中參數(shù)值的4種方法
- 使用JavaScript獲取URL參數(shù)的方法總結(jié)
- JavaScript獲取URL參數(shù)的幾種方法小結(jié)
- JavaScript獲取URL參數(shù)的四種方法總結(jié)
- js獲取url參數(shù)值的幾種方式詳解
- JS獲取URL網(wǎng)址中參數(shù)的幾種方法小結(jié)
相關(guān)文章
小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法
在平常的項目開發(fā)中肯定會遇到同步異步執(zhí)行的問題,這篇文章主要介紹了小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01淺談layui分頁控件field參數(shù)接收對象的問題
今天小編就為大家分享一篇淺談layui分頁控件field參數(shù)接收對象的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09three.js創(chuàng)造時空裂縫特效實現(xiàn)示例
這篇文章主要為大家介紹了three.js創(chuàng)造時空裂縫特效實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11JavaScript 彈出窗體點擊按鈕返回選擇數(shù)據(jù)的實現(xiàn)
這兩天一直想實現(xiàn)這個,以前做做個Demo,但是不知道跑哪去了。于是今天在網(wǎng)上找了些資料再自己動手搞定。廢話不多說。直接進入主題啦。2010-04-04Nautil 中使用雙向數(shù)據(jù)綁定的實現(xiàn)
這篇文章主要介紹了Nautil 中使用雙向數(shù)據(jù)綁定的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10微信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機號
這篇文章主要介紹了信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機號,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07JavaScript二維數(shù)組實現(xiàn)的省市聯(lián)動菜單
這篇文章主要介紹了使用二維數(shù)組實現(xiàn)的省市聯(lián)動菜單,通過二維數(shù)組存儲城市列表項,需要的朋友可以參考下2014-05-05