原生JS獲取URL鏈接參數(shù)的幾種常見方法
前言
作為一個前端開發(fā)，我們很多時候都需要對URL進行操作和處理，最常見的一種就是獲取URL鏈接中攜帶的參數(shù)值了。使用框架開發(fā)的小伙伴可能會覺得這很簡單，因為框架提供了很多方法讓我們方便的獲取URL鏈接攜帶的參數(shù)。但是有些時候我們不能依賴框架，需要我們使用原生JS去獲取參數(shù)，這也是面試中經(jīng)常遇到的一道題。今天我們就手撕代碼，利用原生JS去獲取URL鏈接參數(shù)值。
1. 獲取方式總結
利用原生JS獲取URL鏈接參數(shù)的方法也有好幾種，今天我們依次來講解常見的幾種：
- 通過正則匹配的方式
- 利用a標簽內置方法
- 利用split方法分割法
- 使用URLSearchParams方法
2. 具體實現(xiàn)方法
2.1 正則匹配法
這是非常中規(guī)中舉的一種方法，重點是要求我們要懂正則表達式。
代碼如下：
<script>
// 利用正則表達式
let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
// // 返回參數(shù)對象
function queryURLParams(url) {
let pattern = /(\w+)=(\w+)/ig; //定義正則表達式
let parames = {}; // 定義參數(shù)對象
url.replace(pattern, ($, $1, $2) => {
parames[$1] = $2;
});
return parames;
}
console.log(queryURLParams(url))
</script>上段代碼中重點是正則表達式的定義以及replace方法的使用,其中$2分別代表name=elephant、name、elephant，以此類推。replace結合正則更加詳細的使用方法可以自行下去學習。
實現(xiàn)效果：
2.2 利用a標簽
這種方法較少人使用，因為畢竟有點黑科技的意思在里面。它的原理主要就是利用了a標簽得到一些內置屬性，如href、hash、search等屬性。
代碼如下：
<script>
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.向對象中進行存儲
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))
</script>上段代碼中先創(chuàng)建了一個a標簽，然后就可以根據(jù)a標簽的屬性分別得到url的各個部分了，這其實和Vue的路由跳轉獲取參數(shù)有點類似。
實現(xiàn)效果：
2.3 split分割法
該種方法利用了split可以以某個字符講字符串分割為數(shù)組的特點，巧妙地將各個參數(shù)分割出來。
代碼如下：
<script>
let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
function queryURLParams(URL) {
// const url = location.search; // 項目中可直接通過search方法獲取url中"?"符后的字串
let url = URL.split("?")[1];
let obj = {}; // 聲明參數(shù)對象
let arr = url.split("&"); // 以&符號分割為數(shù)組
for (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split("="); // 以"="分割為數(shù)組
obj[arrNew[0]] = arrNew[1];
}
return obj;
}
console.log(queryURLParams(URL))
</script>上傳代碼中如果在實際項目中，可以直接利用location.search獲取“?”后面的字符串，這里為了方便演示，所以利用split分割了以下。
實現(xiàn)效果：
2.4 URLSearchParams方法
URLSearchParams方法能夠讓我們非常方便的獲取URL參數(shù)，但是存在一定的兼容性問題，官網(wǎng)的解釋如下：
URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串。
該接口提供了非常的的方法讓我們來處理URL參數(shù)，這里我們只介紹如何獲取URL參數(shù)值，更加詳細的使用方法大家可以參考官網(wǎng)。
代碼如下：
<script>
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))
</script>這里我們基本上只用了兩行主要代碼就實現(xiàn)了參數(shù)的解析。需要注意的是urlSearchParams.entries()返回的是一個迭代協(xié)議iterator，所以我們需要利用Object.fromEntries()方法將把鍵值對列表轉換為一個對象。
關于迭代協(xié)議，大家可以參考官網(wǎng)：迭代協(xié)議
實現(xiàn)效果：
兼容性：
可以看到我們這個接口不兼容萬惡之源的IE。
附：獲取URL攜帶參數(shù)實例
getUrlParamValue = function (name) {
if (name == null || name == 'undefined') {return null; }
var searchStr = decodeURI(location.search);
var infoIndex = searchStr.indexOf(name + "=");
if (infoIndex == -1) { return null; }
var searchInfo = searchStr.substring(infoIndex + name.length + 1);
var tagIndex = searchInfo.indexOf("&");
if (tagIndex！= -1) { searchInfo = searchInfo.substring(0, tagIndex); }
return searchInfo;
};總結
這里介紹了四種方法來實現(xiàn)URL鏈接參數(shù)值的解析，其中使用最為廣泛的應該當屬split分割法。urlSearchParams 作為后起之秀，也逐漸被大家認可，也有很多方法讓它兼容IE。
到此這篇關于原生JS獲取URL鏈接參數(shù)的幾種常見方法的文章就介紹到這了,更多相關JS獲取URL參數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)滑動滑塊驗證登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了使用jquery解析XML的方法,代碼簡潔實用,需要的朋友可以參考下2014-09-09
顏色模型，是用來表示顏色的數(shù)學模型。比如最常見的?RGB模型，使用?紅綠藍?三色來表示顏色。本文就來和大家講講JavaScript中顏色模型的基礎知識與應用吧2023-02-02
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊圖片切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
遮照層效果實現(xiàn)代碼。2009-09-09
這篇文章主要介紹了js圖片滾動效果時間可隨意設定當鼠標移上去時停止，需要的朋友可以參考下2014-06-06
這篇文章主要給大家介紹了關于對async?await效率問題的深入思考,async和await要搭配Promise使用,它進一步極大的改進了Promise的寫法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
JavaScript實現(xiàn)iframe自動高度調整和不同主域名跨域
這篇文章主要介紹了JavaScript實現(xiàn)iframe自動高度調整和不同主域名跨域,作者通過建立一個代理來同步高度調整,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了24個ES6方法解決JS實際開發(fā)問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
本文主要介分享了js實現(xiàn)倒計時效果（小于10補零）的實例代碼，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03