前端JS獲取URL參數的4種方法總結
前言
對于前端來說,無論是在面試或者工作中都可能遇到處理 url 參數的問題,使用框架進行項目開發(fā)時或許不用,有自帶的獲取參數方式,但是拋開使用框架來說我們也可以使用原生 js 方式或者借用第三方庫來實現參數的獲取并對象化,下面就對具體用法進行介紹整理。
方法1: 字符串 split 方法
因為一個 url 地址是字符串形式的,所以利用 split 方法將參數提取出來,該方法比較常用,而且容易理解(對于不太會使用正則的我來說,haha~)
let URL = "http://www.baidu.com?name=張三&age=25&sex=男&wife=小紅"
function getUrlParams(url) {
// 通過 ? 分割獲取后面的參數字符串
let urlStr = url.split('?')[1]
// 創(chuàng)建空對象存儲參數
let obj = {};
// 再通過 & 將每一個參數單獨分割出來
let paramsArr = urlStr.split('&')
for(let i = 0,len = paramsArr.length;i < len;i++){
// 再通過 = 將每一個參數分割為 key:value 的形式
let arr = paramsArr[i].split('=')
obj[arr[0]] = arr[1];
}
return obj
}
console.log(getUrlParams(URL))
方法2: 利用 URLSearchParams 方法
在 MDN 中結合兩種方法實現參數的獲?。?. 使用 new URLSearchParams(url) 方法,返回一個 URLSearchParams 對象,再調用 entries() 方法返回一個可迭代對象(Iterator);2. 使用 Object.fromEntries(iterable) 方法轉化為普通對象
let URL = "http://www.baidu.com?name=Jack&age=25&sex=men&wife=Lucy"
function getUrlParams2(url) {
let urlStr = url.split('?')[1]
const urlSearchParams = new URLSearchParams(urlStr)
const result = Object.fromEntries(urlSearchParams.entries())
return result
}
console.log(getUrlParams2(URL))
特別的:URLSearchParams 方法不僅可以獲取參數,還可以將參數對象轉為 字符串,詳細用法可查看 MDN 中的介紹,并且該方法存在瀏覽器兼容性問題。
方法3: 利用正則匹配方法
正則匹配功能強大相信很多小伙伴都知道,不僅可以實現在登錄注冊時的賬號、密碼、郵箱、手機號等等的驗證,還可以非常方便的處理一些字符串(校驗、替換、提取等操作),難點在于對正則使用的熟練度,這里就是通過正則提取字符串中需要的字符
let URL = "http://www.baidu.com?name=Tom&friend=Jerry"
function getUrlParams3(url){
// \w+ 表示匹配至少一個(數字、字母及下劃線), [\u4e00-\u9fa5]+ 表示匹配至少一個中文字符
let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
let result = {};
url.replace(pattern, ($, $1, $2)=>{
result[$1] = $2;
})
return result
}
console.log(getUrlParams3(URL))
方法4: 使用第三方庫 qs
使用第三方庫 qs 也可以實現 url 中參數字符的提取,還能實現將參數對象轉為 url 參數形式,需要注意的是瀏覽器 cdn 方式引入時是默認添加到全局對象 window 的 Qs 屬性上的
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js"></script>
<script>
let URL = "http://www.baidu.com?product='iPhone 13 Pro'&price=¥9999.00"
function getUrlParams4(url){
// 引入 qs 庫時會默認掛在到全局 window 的 Qs 屬性上
// console.log(window)
let urlStr = url.split('?')[1]
let result = Qs.parse(urlStr)
// 拼接額外參數
let otherParams = {
num:50,
size:6.1
}
let str = Qs.stringify(otherParams)
let newUrl = url + str
return {result,newUrl}
}
console.log(getUrlParams4(URL))
</script>
總結:
到此這篇關于前端JS獲取URL參數的4種方法的文章就介紹到這了,更多相關前端獲取URL參數內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript cookie與session的使用及區(qū)別深入探究
這篇文章主要介紹了Java中Cookie和Session詳解,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下2022-10-10
Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現百度下拉效果
這篇文章主要介紹了Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現百度下拉效果的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07

