JavaScript獲取URL參數(shù)常見的4種方法
前言
在前端開發(fā)中,處理URL參數(shù)是一個(gè)常見的任務(wù),尤其是在沒有框架支持的情況下。雖然許多框架提供了方便的方法來獲取URL參數(shù),但有時(shí)我們需要依賴原生JavaScript來完成這個(gè)任務(wù)。這也是面試中經(jīng)常出現(xiàn)的問題之一。今天讓我們一起來探討如何利用原生JavaScript來獲取URL參數(shù)值。
獲取方法總結(jié)
原生JS獲取URL鏈接參數(shù)的方法有好幾種,我們一起來學(xué)習(xí)一下常見的幾種。
1.使用正則表達(dá)式
2.利用a標(biāo)簽內(nèi)置方法
3.利用split分割方法
4.使用URLSearchParams方法
具體實(shí)現(xiàn)
方法一: 正則表達(dá)式
function queryURLParams(url, paramName) {
// 正則表達(dá)式模式,用于匹配URL中的參數(shù)部分。正則表達(dá)式的含義是匹配不包含 ?、&、= 的字符作為參數(shù)名,之后是等號(hào)和不包含 & 的字符作為參數(shù)值
let pattern = /([^?&=]+)=([^&]+)/g;
let params = {};
// match用于存儲(chǔ)正則匹配的結(jié)果
let match;
// while 循環(huán)和正則表達(dá)式 exec 方法來迭代匹配URL中的參數(shù)
while ((match = pattern.exec(url)) !== null) {
// 在字符串url中循環(huán)匹配pattern,并對(duì)每個(gè)匹配項(xiàng)進(jìn)行解碼操作,將解碼后的鍵和值分別存儲(chǔ)在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 對(duì)象中不存在,將該參數(shù)名和對(duì)應(yīng)的值添加到 params 對(duì)象中
params[key] = value;
}
}
if (!paramName) {
// 沒有傳入?yún)?shù)名稱, 返回含有所有參數(shù)的對(duì)象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ù)對(duì)象
console.log(queryURLParams(url, 'name')); // 返回參數(shù)名為 'name' 的所有值
console.log(queryURLParams(url, 'age')); // 返回參數(shù)名為 'age' 的值
console.log(queryURLParams(url, 'color')); // 返回""正則表達(dá)式解釋:
([^?&=]+):這部分是一個(gè)捕獲組,表示匹配不包含?、&、=的任意字符的一個(gè)或多個(gè),即匹配參數(shù)名部分。=:表示匹配參數(shù)名和參數(shù)值之間的等號(hào)。([^&]+):這部分也是一個(gè)捕獲組,表示匹配不包含&的任意字符的一個(gè)或多個(gè),即匹配參數(shù)值部分。g:表示使用全局匹配模式,即匹配目標(biāo)字符串中所有符合模式的部分。
方法二: 利用a標(biāo)簽
a標(biāo)簽內(nèi)置的方法能夠快速且方便地獲取URL參數(shù),
它的原理主要就是利用了a標(biāo)簽得到一些內(nèi)置屬性,如href、hash、search等屬性。
考慮到URL中的哈希部分,在函數(shù)queryURLParams(url)中,會(huì)檢查URL中的哈希部分是否存在,如果存在則將哈希值存儲(chǔ)到參數(shù)對(duì)象中,并將屬性名設(shè)置為"HASH"。這樣在返回的參數(shù)對(duì)象中,如果URL中有哈希部分,就可以通過"HASH"來訪問哈希值。
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
function queryURLParams(url) {
// 1.創(chuàng)建a標(biāo)簽
let link = document.createElement('a');
link.href = url;
let searchUrl = link.search.substr(1); // 獲取問號(hào)后面字符串
let hashUrl = link.hash.substr(1); // 獲取#后面的值
let obj = {}; // 聲明參數(shù)對(duì)象
// 2.向?qū)ο笾羞M(jìn)行存儲(chǔ)
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)建了一個(gè)a標(biāo)簽,然后就可以根據(jù)a標(biāo)簽的屬性分別得到url的各個(gè)部分了,這其實(shí)和Vue的路由跳轉(zhuǎn)獲取參數(shù)有點(diǎn)類似。
1. 將傳入的URL賦值給 `<a>` 標(biāo)簽的 `href` 屬性的目的是利用瀏覽器提供的原生 API 來幫助實(shí)現(xiàn) URL 參數(shù)的解析。通過將URL賦值給 `<a>` 標(biāo)簽的 `href` 屬性,瀏覽器會(huì)自動(dòng)解析這個(gè)URL,包括提取其中的協(xié)議、主機(jī)、路徑、查詢參數(shù)等各個(gè)部分,從而方便我們對(duì)這個(gè)URL進(jìn)行進(jìn)一步的操作。
2. 通過`link.search.substr(1)`和`link.hash.substr(1)`可以獲取URL中問號(hào)后面的字符串和`#`后面的值,是因?yàn)闉g覽器在解析URL后會(huì)將這些信息存儲(chǔ)在`<a>`標(biāo)簽對(duì)象的對(duì)應(yīng)屬性中。具體來說:
- `link.search` 包含了 URL 中問號(hào)后面的部分(即查詢參數(shù)部分)。
- `link.hash` 包含了 URL 中`#`后面的部分(即片段部分)。
- 使用`substr(1)`是為了去掉字符串中的問號(hào)或`#`字符,只留下真正的參數(shù)內(nèi)容或片段內(nèi)容。
方法三: split分割法
這種方法利用了split可以以某個(gè)字符講字符串分割為數(shù)組的特點(diǎn),巧妙地將各個(gè)參數(shù)分割出來。
function getUrlParams(url, paramName) {
// 從 URL 中提取查詢參數(shù)部分
const queryString = url.split('?')[1];
// 如果沒有查詢參數(shù),返回空對(duì)象
if (!queryString) {
return {};
}
// 處理帶有 hash 地址的情況
const hashIndex = queryString.indexOf('#');
if (hashIndex !== -1) {
queryString = queryString.substring(0, hashIndex);
}
// 將查詢參數(shù)字符串解析為鍵值對(duì)
const queryParams = {};
queryString.split('&').forEach(param => {
const [key, value] = param.split('=');
// 如果值已經(jīng)存在,則將其轉(zhuǎn)換為數(shù)組存儲(chǔ)
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ù)的對(duì)象
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ù)時(shí),通常情況下不需要處理 hash 地址部分。
Hash 地址通常用于客戶端路由或頁(yè)面內(nèi)導(dǎo)航,一般不會(huì)包含查詢參數(shù)信息。
但在某些情況下,可能需要處理帶有 hash 地址的 URL,例如:
1. 當(dāng)需要從 URL 中提取查詢參數(shù)時(shí),如果 URL 中的查詢參數(shù)部分后面緊跟著 hash 地址(如 `http://example.com/page?name=John#section2`),需要排除 hash 部分以確保正確提取查詢參數(shù)。
2. 如果要監(jiān)聽 hash 地址的變化,并根據(jù)不同的 hash 地址執(zhí)行不同的邏輯(如單頁(yè)面應(yīng)用路由器),則需要處理 hash 地址的改變并做出響應(yīng)。 總的來說,在處理 URL 查詢參數(shù)時(shí)一般不需要處理 hash 地址部分,但在特定情況下需要注意并處理。
方法四: URLSearchParams
URLSearchParams方法能夠讓我們非常方便的獲取URL參數(shù),但是存在一定的兼容性問題,官網(wǎng)的解釋如下:
URLSearchParams 接口定義了一些實(shí)用的方法來處理 URL 的查詢字符串。
該接口提供了非常的的方法讓我們來處理URL參數(shù),這里我們只介紹如何獲取URL參數(shù)值,更加詳細(xì)的使用方法大家可以參考官網(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))這里我們基本上只用了兩行主要代碼就實(shí)現(xiàn)了參數(shù)的解析。需要注意的是urlSearchParams.entries()返回的是一個(gè)迭代協(xié)議iterator,所以我們需要利用Object.fromEntries()方法將把鍵值對(duì)列表轉(zhuǎn)換為一個(gè)對(duì)象。
關(guān)于迭代協(xié)議,大家可以參考官網(wǎng):迭代協(xié)議
總結(jié):
這里介紹了四種方法來實(shí)現(xiàn)URL鏈接參數(shù)值的解析,其中使用最為廣泛的應(yīng)該當(dāng)屬split分割法??偟膩碚f,了解和掌握這些方法可以幫助前端開發(fā)者更有效地處理URL參數(shù),從而提升開發(fā)效率和應(yīng)對(duì)面試中可能出現(xiàn)的相關(guān)問題。
到此這篇關(guān)于JavaScript獲取URL參數(shù)常見的4種方法的文章就介紹到這了,更多相關(guān)JS獲取URL參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)
這篇文章主要介紹了JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法
這篇文章主要介紹了Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
使用JSX 建立組件 Parser(解析器)開發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser(解析器)開發(fā)的示例(前端組件化)本文重點(diǎn)講述我們?nèi)绾螐?開始搭建一個(gè)組件系統(tǒng),基于標(biāo)記語言的Parser的一種風(fēng)格2021-04-04
javaScript刪除對(duì)象屬性的幾種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于javaScript刪除對(duì)象屬性的幾種方法的相關(guān)資料,它們?cè)诓煌瑘?chǎng)景下有不同的應(yīng)用,需要根據(jù)實(shí)際情況選擇最合適的刪除方法,文中通過實(shí)例代碼介紹的非常詳細(xì),下面需要的朋友可以參考下2023-06-06
javascript代碼調(diào)試之console.log 用法圖文詳解
對(duì)于開始學(xué)js的朋友可能不知道為什么用console.log,頁(yè)面中也看不到信息,對(duì)于這個(gè)console.log腳本之家小編特整理與介紹一下,方便需要的朋友2016-09-09
HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題
這篇文章主要介紹了HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問題,需要的朋友可以參考下2017-12-12
利用JavaScript實(shí)現(xiàn)仿QQ個(gè)人資料卡效果
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實(shí)現(xiàn)仿QQ個(gè)人資料卡效果,文中的示例代碼講解詳細(xì),感興趣的可以動(dòng)手嘗試一下2022-08-08

