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標(biāo)簽內(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:表示使用全局匹配模式,即匹配目標(biāo)字符串中所有符合模式的部分。
方法二: 利用a標(biāo)簽
a標(biāo)簽內(nèi)置的方法能夠快速且方便地獲取URL參數(shù),
它的原理主要就是利用了a標(biāo)簽得到一些內(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標(biāo)簽
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標(biāo)簽,然后就可以根據(jù)a標(biāo)簽的屬性分別得到url的各個部分了,這其實和Vue的路由跳轉(zhuǎn)獲取參數(shù)有點類似。
1. 將傳入的URL賦值給 `<a>` 標(biāo)簽的 `href` 屬性的目的是利用瀏覽器提供的原生 API 來幫助實現(xiàn) URL 參數(shù)的解析。通過將URL賦值給 `<a>` 標(biāo)簽的 `href` 屬性,瀏覽器會自動解析這個URL,包括提取其中的協(xié)議、主機、路徑、查詢參數(shù)等各個部分,從而方便我們對這個URL進行進一步的操作。
2. 通過`link.search.substr(1)`和`link.hash.substr(1)`可以獲取URL中問號后面的字符串和`#`后面的值,是因為瀏覽器在解析URL后會將這些信息存儲在`<a>`標(biāo)簽對象的對應(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,了解和掌握這些方法可以幫助前端開發(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
bootstrap table插件的分頁與checkbox使用詳解
這篇文章主要為大家詳細介紹了bootstrap table插件的分頁與checkbox使用詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
javaScript嗅探執(zhí)行神器-sniffer.js
本文主要介紹了javaScript嗅探執(zhí)行神器-sniffer.js的相關(guān)知識。具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02

