您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript中怎么獲取URL參數(shù)”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“JavaScript中怎么獲取URL參數(shù)”文章能幫助大家解決問題。
利用原生JS獲取URL鏈接參數(shù)的方法也有好幾種,今天我們依次來講解常見的幾種:
通過正則匹配的方式
利用a標(biāo)簽內(nèi)置方法
利用split方法分割法
使用URLSearchParams方法
這是非常中規(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方法的使用,其中1、$2分別代表name=elephant、name、elephant,以此類推。replace結(jié)合正則更加詳細(xì)的使用方法可以自行下去學(xué)習(xí)。
實(shí)現(xiàn)效果:
這種方法較少人使用,因?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); // 獲取問號(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)類似。
實(shí)現(xiàn)效果:
該種方法利用了split可以以某個(gè)字符講字符串分割為數(shù)組的特點(diǎn),巧妙地將各個(gè)參數(shù)分割出來。
代碼如下:
<script> let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100" function queryURLParams(URL) { // const url = location.search; // 項(xiàng)目中可直接通過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)效果:
URLSearchParams方法能夠讓我們非常方便的獲取URL參數(shù),但是存在一定的兼容性問題,官網(wǎng)的解釋如下:
URLSearchParams 接口定義了一些實(shí)用的方法來處理 URL 的查詢字符串。
該接口提供了非常的的方法讓我們來處理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):
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols
實(shí)現(xiàn)效果:
兼容性:
可以看到我們這個(gè)接口不兼容萬惡之源的IE。
關(guān)于“JavaScript中怎么獲取URL參數(shù)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。