使用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; }
效果
一點思路
靈活運用瀏覽器自帶的location屬性 可以節(jié)省數(shù)據(jù)傳遞的復雜度
又:一些保密性強的參數(shù),建議使用https域名或者其他加密方式傳遞。
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
JavaScript數(shù)組_動力節(jié)點Java學院整理
這篇文章主要介紹了JavaScript數(shù)組的相關知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06前端實現(xiàn)文本超出指定行數(shù)顯示"展開"和"收起"效果詳細步驟
本文介紹如何使用JavaScript原生代碼實現(xiàn)文本折疊展開效果,并提供方法指導如何在Vue或React等框架中修改實現(xiàn),詳細介紹了創(chuàng)建整體框架、設置樣式及利用JS控制元素的步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10