JS如何获取URL中的Query参数

 更新时间:2023年01月17日 09:18:54   作者:loki951753  
这篇文章主要介绍了JS如何获取URL中的Query参数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

JS获取URL的Query参数

需求描述

获取 URL 中的 Query 参数,例如:

https://www.example.com/test.html?a=param1&b=param2

代码片段

实现一

使用URLSearchParams对象,兼容性见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();

实现二

function parseSearchParams(searchParamsString){
    return searchParamsString.split('&').reduce((searchParams, curKV)=>{
        const [k, v] = curKV.split('=').map(decodeURIComponent);
        searchParams[k] = v;

        return searchParams;
    }, {});
}

JS获取URL上的指定参数

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript定时器实现无缝滚动图片

    JavaScript定时器实现无缝滚动图片

    这篇文章主要为大家详细介绍了JavaScript定时器实现无缝滚动图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js 删除数组的几种方法小结

    js 删除数组的几种方法小结

    本篇文章主要是对js中删除数组的几种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JS获取页面input控件中所有text控件并追加样式属性

    JS获取页面input控件中所有text控件并追加样式属性

    使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式,由于其他方式比较麻烦所以就想通过在页面加载的时候将要改动的text找到并添加属性,感兴趣的你可以参考下,希望可以帮助到你
    2013-02-02
  • 微信小程序数据存储与取值详解

    微信小程序数据存储与取值详解

    这篇文章主要为大家详细介绍了微信小程序数据存储与取值的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 如何在JavaScript中等分数组的实现

    如何在JavaScript中等分数组的实现

    这篇文章主要介绍了如何在JavaScript中等分数组的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 基于javascript html5实现多文件上传

    基于javascript html5实现多文件上传

    这篇文章主要为大家详细介绍了基于javascript html5实现多文件上传的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript基础之this和箭头函数详析

    JavaScript基础之this和箭头函数详析

    这篇文章主要给大家介绍了关于JavaScript基础之this和箭头函数的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 轻轻松松学JS调试(不下载任何工具)

    轻轻松松学JS调试(不下载任何工具)

    很多人可能遇到这样的问题,JS调试,而且都很郁闷,虽然我的JS学的不是那么透彻,基本上算是初级入门.
    2010-04-04
  • 详解基于Bootstrap扁平化的后台框架Ace

    详解基于Bootstrap扁平化的后台框架Ace

    Bootstrap是Twitter 于2010年开发出来的前端框架,用过的同学应该知道,这款前端框架不仅界面很美观,而且兼容了很多的浏览器,大大加速了我们开发网站的速度,本文给大家介绍基于Bootstrap扁平化的后台框架Ace,需要的朋友参考下
    2015-11-11
  • js检查是否关闭浏览器的方法

    js检查是否关闭浏览器的方法

    这篇文章主要介绍了js检查是否关闭浏览器的方法,涉及javascript针对窗口事件的判定与操作相关技巧,需要的朋友可以参考下
    2016-08-08

最新评论