使用js獲取url中的參數(shù)并返回一個對象方式

更新時間：2023年01月17日 09:27:02 作者：Lmx!

這篇文章主要介紹了使用js獲取url中的參數(shù)并返回一個對象方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

js獲取url中的參數(shù)并返回一個對象

今天寫一個原生的html需要進行url的參數(shù)提取，為了方便以后用到時直接用將這個方法記錄在此。

思路

使用window.loaction.href獲取到當前頁面的鏈接，然后對這個url字符串進行處理。

這些處理的前提是你要了解url，url由協(xié)議、域名、路徑、查詢字符串等組成。

我們要提取得參數(shù)也就是查詢字符（qurey）是連接在？后面的鍵值對且用&符合分割。

我們處理要做的事情就是將這些鍵值對提取出來并組裝成對象。

function getUrlParams(url){
? const Params = {}
? if(url.indexOf('?')>0){//判斷是否有qurey
? ? let parmas = url.slice(url.indexOf('?')+1)//截取出query
? ? const paramlists = parmas.split('&')//分割鍵值對
? ? for (const param of paramlists) {
? ? ? let a = param.split('=')
? ? ? Object.assign(Params,{[a[0]]:a[1]})//將鍵值對封裝成對象
? ? }
? }
? return Params
}

js解析url中的參數(shù)——返回對象

需求

在同域的不同前端頁面跳轉(zhuǎn)或者不同域前端頁面跳轉(zhuǎn)時，可以通過參數(shù)傳遞一些數(shù)據(jù)，比如下面我們在某度搜索“location.search”:

這里寫圖片描述

輸入：一個包含參數(shù)的URL地址
輸出：一個含有所有參數(shù)的對象

代碼

目前有兩種解決方案

方案1

const getURLParameters = url =>
url.match(/([^?=&]+)(=([^&]*))/g)
.reduce((a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
);

效果

這里寫圖片描述

方案2（更易懂一些）

const parseQueryString = url=>{
     var json = {};
     var arr = url.substr(url.indexOf('?') + 1).split('&');
    arr.forEach(item=>{
        var tmp = item.split('=');
                 json[tmp[0]] = tmp[1];
    });
    return json;
}

效果

這里寫圖片描述