前端JS獲取URL引數的4種方法總結

2022-04-05 13:00:32

前言

對於前端來說，無論是在面試或者工作中都可能遇到處理 url 引數的問題，使用框架進行專案開發時或許不用，有自帶的獲取引數方式，但是拋開使用框架來說我們也可以使用原生 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]
    // 建立空物件儲存引數
	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 中結合兩種方法實現引數的獲取：1. 使用 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引數內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

前端JS獲取URL引數的4種方法總結

目錄

前言

方法1: 字串 split 方法

方法2: 利用 URLSearchParams 方法

方法3: 利用正則匹配方法

方法4: 使用第三方庫 qs

總結:

熱門文章