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

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

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

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

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

思路

使用window.loaction.href獲取到當(dāng)前頁(yè)面的鏈接，然后對(duì)這個(gè)url字符串進(jìn)行處理。

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

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

我們處理要做的事情就是將這些鍵值對(duì)提取出來(lái)并組裝成對(duì)象。

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

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

需求

在同域的不同前端頁(yè)面跳轉(zhuǎn)或者不同域前端頁(yè)面跳轉(zhuǎn)時(shí)，可以通過(guò)參數(shù)傳遞一些數(shù)據(jù)，比如下面我們?cè)谀扯人阉?ldquo;location.search”:

這里寫(xiě)圖片描述

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

代碼

目前有兩種解決方案

方案1

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

效果

這里寫(xiě)圖片描述

方案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;
}

效果

這里寫(xiě)圖片描述