JavaScript獲取URL引數的方法分享

2022-04-07 19:00:50

一、字串 split 方法

url 地址是字串形式的，所以利用 split 方法將引數提取出來，該方法比較常用，而且容易理解（無關正則）

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));

二、使用 URLSearchParams 方法

1、解析搜尋字串

let url = 'https://www.baidu.com/s?ie=UTF-8&wd=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1';
let urlStr = url.split('?')[1];
const params = new URLSearchParams(urlStr);
console.log(params.get('k'));   // 返回字串「許善祥」，支援自動 UTF-8 解碼
console.log(params.get('p'));   // 返回字串「1」
console.log(params.get('xxx')); // 如果沒有 xxx 這個鍵，則返回 null
console.log(params.has('xxx')); // 當然也可以通過 has() 方法查詢是否存在指定的鍵
console.log(params.keys());     // 返回一個 ES6 Iterator，內含 ['k', 'p']
console.log(params.values());   // 返一個 ES6 Iterator，內含 ['許善祥', '1']
console.log(params.entries());  // 與 Map.prototype.entries() 類似

2、生成搜尋字串

const params = new URLSearchParams();
params.set('k', '許善祥');       // 設定引數
params.set('p', 1);             // 支援 Boolean、Number 等豐富型別
console.log(params.toString()); // k=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1

3、Node.js 程式碼

const { URLSearchParams } = require('url');

const urlSearchParams = new URLSearchParams();

三、使用正則匹配方法

正則匹配功能強大，不僅可以實現在登入註冊時的賬號、密碼、郵箱、手機號等驗證（看這裡），還可以非常方便的處理一些字串（校驗、替換、提取等操作）。

let URL = 'http://www.baidu.com?name=祥&friend=宇';
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));
// {name: '祥', friend: '宇'}

四、使用第三方庫 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?name=祥&friend=宇';
function getUrlParams4(url) {
    // 引入 qs 庫時會預設掛在到全域性 window 的 Qs 屬性上
    // console.log(window);
    let urlStr = url.split('?')[1];
    let result = Qs.parse(urlStr);
    // 拼接額外引數
    let otherParams = {
        homepage: 'xushanxiang.com'
    };
    let str = Qs.stringify(otherParams);
    let newUrl = url + str;
    return {result, newUrl};
}
console.log(getUrlParams4(URL));

到此這篇關於JavaScript獲取URL引數的方法分享的文章就介紹到這了,更多相關JavaScript獲取URL引數內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！