前言
作為一個前端開發，我們很多時候都需要對URL進行操作和處理，最常見的一種就是獲取URL鏈接中攜帶的參數值瞭。使用框架開發的小夥伴可能會覺得這很簡單，因為框架提供瞭很多方法讓我們方便的獲取URL鏈接攜帶的參數。但是有些時候我們不能依賴框架，需要我們使用原生JS去獲取參數，這也是面試中經常遇到的一道題。今天我們就手撕代碼，利用原生JS去獲取URL鏈接參數值。
1. 獲取方式總結
利用原生JS獲取URL鏈接參數的方法也有好幾種，今天我們依次來講解常見的幾種：
- 通過正則匹配的方式
- 利用a標簽內置方法
- 利用split方法分割法
- 使用URLSearchParams方法
2. 具體實現方法
2.1 正則匹配法
這是非常中規中舉的一種方法，重點是要求我們要懂正則表達式。
代碼如下：
<script>
// 利用正則表達式
let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
// // 返回參數對象
function queryURLParams(url) {
let pattern = /(w+)=(w+)/ig; //定義正則表達式
let parames = {}; // 定義參數對象
url.replace(pattern, ($, $1, $2) => {
parames[$1] = $2;
});
return parames;
}
console.log(queryURLParams(url))
</script>