JS如何獲取URL中的Query參數(shù)
更新時(shí)間:2023年01月17日 09:18:54 作者:loki951753
這篇文章主要介紹了JS如何獲取URL中的Query參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
JS獲取URL的Query參數(shù)
需求描述
獲取 URL 中的 Query 參數(shù),例如:
https://www.example.com/test.html?a=param1&b=param2
代碼片段
實(shí)現(xiàn)一
使用URLSearchParams對(duì)象,兼容性見(jiàn)Can I use
const urlString = 'https://www.example.com/test.html?a=param1&b=param2'; const urlObj = new URL(urlString); const [a, b] = urlObj.searchParams.values();
實(shí)現(xiàn)二
function parseSearchParams(searchParamsString){
return searchParamsString.split('&').reduce((searchParams, curKV)=>{
const [k, v] = curKV.split('=').map(decodeURIComponent);
searchParams[k] = v;
return searchParams;
}, {});
}
JS獲取URL上的指定參數(shù)
function getAllUrlParams(url) {
// get query string from url (optional) or window
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
// we'll store the parameters here
var obj = {};
// if query string exists
if (queryString) {
// stuff after # is not part of query string, so get rid of it
queryString = queryString.split('#')[0];
// split our query string into its component parts
var arr = queryString.split('&');
for (var i = 0; i < arr.length; i++) {
// separate the keys and the values
var a = arr[i].split('=');
// in case params look like: list[]=thing1&list[]=thing2
var paramNum = undefined;
var paramName = a[0].replace(/\[\d*\]/, function (v) {
paramNum = v.slice(1, -1);
return '';
});
// set parameter value (use 'true' if empty)
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
// if parameter name already exists
if (obj[paramName]) {
// convert value to array (if still string)
if (typeof obj[paramName] === 'string') {
obj[paramName] = [obj[paramName]];
}
// if no array index number specified...
if (typeof paramNum === 'undefined') {
// put the value on the end of the array
obj[paramName].push(paramValue);
}
// if array index number specified...
else {
// put the value at that index number
obj[paramName][paramNum] = paramValue;
}
}
// if param name doesn't exist yet, set it
else {
obj[paramName] = paramValue;
}
}
}
return obj;
};
var x = getAllUrlParams('http://127.0.0.1:5000/app/index.html?code=KXMvRUkC92WaJ6n3vELMU3iK2128879&state=').code;
console.log(x);總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript定時(shí)器實(shí)現(xiàn)無(wú)縫滾動(dòng)圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript定時(shí)器實(shí)現(xiàn)無(wú)縫滾動(dòng)圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05
JS獲取頁(yè)面input控件中所有text控件并追加樣式屬性
使用jquery來(lái)在頁(yè)面加載時(shí)獲取頁(yè)面input控件中所有text控件并添加樣式,由于其他方式比較麻煩所以就想通過(guò)在頁(yè)面加載的時(shí)候?qū)⒁膭?dòng)的text找到并添加屬性,感興趣的你可以參考下,希望可以幫助到你2013-02-02
如何在JavaScript中等分?jǐn)?shù)組的實(shí)現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分?jǐn)?shù)組的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
基于javascript html5實(shí)現(xiàn)多文件上傳
這篇文章主要為大家詳細(xì)介紹了基于javascript html5實(shí)現(xiàn)多文件上傳的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03
JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析
這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)之this和箭頭函數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09

