快捷導(dǎo)航

原生JS獲取URL鏈接參數(shù)的幾種常見(jiàn)方法

更新時(shí)間：2022年03月17日 11:48:33 作者：Hacker233

這篇文章主要給大家介紹了關(guān)于利用原生JS獲取URL鏈接參數(shù)的幾種常見(jiàn)方法,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

作為一個(gè)前端開(kāi)發(fā)，我們很多時(shí)候都需要對(duì)URL進(jìn)行操作和處理，最常見(jiàn)的一種就是獲取URL鏈接中攜帶的參數(shù)值了。使用框架開(kāi)發(fā)的小伙伴可能會(huì)覺(jué)得這很簡(jiǎn)單，因?yàn)榭蚣芴峁┝撕芏喾椒ㄗ屛覀兎奖愕墨@取URL鏈接攜帶的參數(shù)。但是有些時(shí)候我們不能依賴框架，需要我們使用原生JS去獲取參數(shù)，這也是面試中經(jīng)常遇到的一道題。今天我們就手撕代碼，利用原生JS去獲取URL鏈接參數(shù)值。

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

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

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

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

2.1 正則匹配法

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

代碼如下：

<script>
  // 利用正則表達(dá)式
  let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  // // 返回參數(shù)對(duì)象
  function queryURLParams(url) {
    let pattern = /(\w+)=(\w+)/ig; //定義正則表達(dá)式
    let parames = {}; // 定義參數(shù)對(duì)象
    url.replace(pattern, ($, $1, $2) => {
      parames[$1] = $2;
    });
    return parames;
  }
  console.log(queryURLParams(url))
</script>

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

實(shí)現(xiàn)效果：

2.2 利用a標(biāo)簽

這種方法較少人使用，因?yàn)楫吘褂悬c(diǎn)黑科技的意思在里面。它的原理主要就是利用了a標(biāo)簽得到一些內(nèi)置屬性，如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標(biāo)簽
    let link = document.createElement('a');
    link.href = url;
    let searchUrl = link.search.substr(1); // 獲取問(wèn)號(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))
</script>

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

實(shí)現(xiàn)效果：

2.3 split分割法

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

代碼如下：

<script>
  let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  function queryURLParams(URL) {
    // const url = location.search; // 項(xiàng)目中可直接通過(guò)search方法獲取url中"?"符后的字串
    let url = URL.split("?")[1];
    let obj = {}; // 聲明參數(shù)對(duì)象
    let arr = url.split("&"); // 以&符號(hào)分割為數(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>

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

實(shí)現(xiàn)效果：

2.4 URLSearchParams方法

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

URLSearchParams 接口定義了一些實(shí)用的方法來(lái)處理 URL 的查詢字符串。

該接口提供了非常的的方法讓我們來(lái)處理URL參數(shù)，這里我們只介紹如何獲取URL參數(shù)值，更加詳細(xì)的使用方法大家可以參考官網(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>

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

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

實(shí)現(xiàn)效果：

兼容性：

可以看到我們這個(gè)接口不兼容萬(wàn)惡之源的IE。

附：獲取URL攜帶參數(shù)實(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;
};