第原生JS獲取URL鏈接參數(shù)的幾種常見方法作為一個前端開發(fā)，我們很多時候都需要對URL進行操作和處理，最常見的一種就是獲取URL鏈接中攜帶的參數(shù)值了。使用框架開發(fā)的小伙伴可能會覺得這很簡單，因為框架提供了很多方法讓我們方便的獲取URL鏈接攜帶的參數(shù)。但是有些時候我們不能依賴框架，需要我們使用原生JS去獲取參數(shù)，這也是面試中經(jīng)常遇到的一道題。今天我們就手撕代碼，利用原生JS去獲取URL鏈接參數(shù)值。

1.獲取方式總結(jié)

利用原生JS獲取URL鏈接參數(shù)的方法也有好幾種，今天我們依次來講解常見的幾種：

通過正則匹配的方式利用a標(biāo)簽內(nèi)置方法利用split方法分割法使用URLSearchParams方法

2.具體實現(xiàn)方法

2.1正則匹配法

這是非常中規(guī)中舉的一種方法，重點是要求我們要懂正則表達式。

代碼如下：

script

//利用正則表達式

leturl="name=elephantage=25sex=malenum=100"

////返回參數(shù)對象

functionqueryURLParams(url){

letpattern=/(\w+)=(\w+)/ig;//定義正則表達式

letparames={};//定義參數(shù)對象

url.replace(pattern,($,$1,$2)={

parames[$1]=$2;

returnparames;

console.log(queryURLParams(url))

/script

上段代碼中重點是正則表達式的定義以及replace方法的使用,其中$2分別代表name=elephant、name、elephant，以此類推。replace結(jié)合正則更加詳細的使用方法可以自行下去學(xué)習(xí)。

實現(xiàn)效果：

2.2利用a標(biāo)簽

這種方法較少人使用，因為畢竟有點黑科技的意思在里面。它的原理主要就是利用了a標(biāo)簽得到一些內(nèi)置屬性，如href、hash、search等屬性。

代碼如下：

script

letURL="name=elephantage=25sex=malenum=100#smallpig"

functionqueryURLParams(url){

//1.創(chuàng)建a標(biāo)簽

letlink=document.createElement('a');

link.href=url;

letsearchUrl=link.search.substr(1);//獲取問號后面字符串

lethashUrl=link.hash.substr(1);//獲取#后面的值

letobj={};//聲明參數(shù)對象

//2.向?qū)ο笾羞M行存儲

hashUrlobj['HASH']=hashUrl:null;//#后面是否有值

letlist=searchUrl.split("

for(leti=0;ilist.length;i++){

letarr=list[i].split("=");

obj[arr[0]]=arr[1];

returnobj;

console.log(queryURLParams(URL))

/script

上段代碼中先創(chuàng)建了一個a標(biāo)簽，然后就可以根據(jù)a標(biāo)簽的屬性分別得到url的各個部分了，這其實和Vue的路由跳轉(zhuǎn)獲取參數(shù)有點類似。

實現(xiàn)效果：

2.3split分割法

該種方法利用了split可以以某個字符講字符串分割為數(shù)組的特點，巧妙地將各個參數(shù)分割出來。

代碼如下：

script

letURL="name=elephantage=25sex=malenum=100"

functionqueryURLParams(URL){

//consturl=location.search;//項目中可直接通過search方法獲取url中""符后的字串

leturl=URL.split("")[1];

letobj={};//聲明參數(shù)對象

letarr=url.split("http://以符號分割為數(shù)組

for(leti=0;iarr.length;i++){

letarrNew=arr[i].split("=");//以"="分割為數(shù)組

obj[arrNew[0]]=arrNew[1];

returnobj;

console.log(queryURLParams(URL))

/script

上傳代碼中如果在實際項目中，可以直接利用location.search獲取后面的字符串，這里為了方便演示，所以利用split分割了以下。

實現(xiàn)效果：

2.4URLSearchParams方法

URLSearchParams方法能夠讓我們非常方便的獲取URL參數(shù)，但是存在一定的兼容性問題，官網(wǎng)的解釋如下：

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

該接口提供了非常的的方法讓我們來處理URL參數(shù)，這里我們只介紹如何獲取URL參數(shù)值，更加詳細的使用方法大家可以參考官網(wǎng)。

代碼如下：

script

letURL="name=elephantage=25sex=malenum=100"

functionqueryURLParams(URL){

leturl=URL.split("")[1];

consturlSearchParams=newURLSearchParams(url);

constparams=Object.fromEntries(urlSearchParams.entries());

returnparams

console.log(queryURLParams(URL))

/script

這里我們基本上只用了兩行主要代碼就實現(xiàn)了參數(shù)的解析。需要注意的是urlSearchParams.entries()返回的是一個迭代協(xié)議iterator，所以我們需要利用Object.fromEntries()方法將把鍵值對列表轉(zhuǎn)換為一個對象。

關(guān)于迭代協(xié)議，大家可以參考官網(wǎng)：迭代協(xié)議

實現(xiàn)效果：

兼容性：

可以看到我們這個接口不兼容萬惡之源的IE。

附：獲取URL攜帶參數(shù)實例

getUrlParamValue=function(name){

if(name==null||name=='undefined'){returnnull;}

varsearchStr=decodeURI(location.search);

varinfoIndex=searchStr.indexOf(name+"=");

if(infoIndex==-1){returnnull;}

varsearchInfo=searchStr.substring(infoIndex+name.length+1);

vartagIndex=searchInfo.indexOf("

if(tagIndex！=