广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS如何获取URL中的Query参数
  • 713
分享到

JS如何获取URL中的Query参数

JSQuery参数JS获取URL的Query参数JS获取Query参数 2023-01-17 12:01:33 713人浏览 薄情痞子
摘要

目录js获取URL的Query参数需求描述实现一实现二JS获取URL上的指定参数总结JS获取URL的Query参数 需求描述 获取 URL 中的 Query 参数,例如: https

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: JS如何获取URL中的Query参数

本文链接: https://www.lsjlt.com/news/177950.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS如何获取URL中的Query参数
    目录JS获取URL的Query参数需求描述实现一实现二JS获取URL上的指定参数总结JS获取URL的Query参数 需求描述 获取 URL 中的 Query 参数,例如: https...
    99+
    2023-01-17
    JS Query参数 JS获取URL的Query参数 JS获取Query参数
  • js如何获取URL中的参数
    这篇文章主要介绍js如何获取URL中的参数,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!获取 URL 中的参数这个需求在三大框架的时代应用貌似不多了,不过面试中问的还是蛮多的,了解一下是好的简单实现var ...
    99+
    2023-06-27
  • python 使用get_argument获取url query参数
    python 使用get_argument获取url query参数 ornado的每个请求处理程序,我们叫做handler,handler里可以自定义自己的处理程序,其实也就是重写方法,如post,get...
    99+
    2022-06-04
    参数 get_argument python
  • react如何获取URL中参数
    目录react获取URL中参数react 获取URL原理下面是几个例子react获取页面跳转URL携带的参数总结react获取URL中参数 这个问题想必很多人都会遇到过,这里我说一下...
    99+
    2023-02-13
    react获取URL参数 react URL参数 获取URL参数
  • Jquery如何获取url及url参数
    这篇文章主要介绍了Jquery如何获取url及url参数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   在网页的Get方式传递参数的时...
    99+
    2022-10-19
  • js获取url参数值的两种方式
    方法一:正则分析法 复制代码 代码如下: function getQueryString(name) { var reg = new RegExp("(^|&)" + nam...
    99+
    2022-11-15
    js url参数
  • JavaScript中如何获取url中的参数
    这篇文章给大家分享的是有关JavaScript中如何获取url中的参数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。  1、获取指定ur...
    99+
    2022-10-19
  • Python如何获取URL参数
    这篇文章主要介绍了Python如何获取URL参数的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Python如何获取URL参数文章都会有所收获,下面我们一起来看看吧。下文中使用的 URL 地址是:https://...
    99+
    2023-07-02
  • 如何使用原生JS获取URL链接参数
    这篇文章将为大家详细讲解有关如何使用原生JS获取URL链接参数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 获取方式总结利用原生JS获取URL链接参数的方法也有好几种,今天我们依次来讲解常见的几种:...
    99+
    2023-06-29
  • java如何获取url中的参数值
    在Java中获取URL中的参数值可以使用`java.net.URLDecoder`类的`decode`方法来解码URL中的参数。具体...
    99+
    2023-08-08
    java
  • 前端JS获取URL参数的方法有哪些
    今天小编给大家分享一下前端JS获取URL参数的方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。方法1: 字符串 sp...
    99+
    2023-06-29
  • 如何通过Param获取URL的参数
    这篇“如何通过Param获取URL的参数”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何通过Param获取URL的参数”文...
    99+
    2023-06-26
  • JavaScript中怎么获取URL参数
    这篇文章主要介绍“JavaScript中怎么获取URL参数”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript中怎么获取URL参数”文章能帮助大家解决...
    99+
    2022-10-19
  • 前端JS获取URL参数的4种方法总结
    目录前言方法1: 字符串 split 方法方法2: 利用 URLSearchParams 方法方法3: 利用正则匹配方法方法4: 使用第三方库 qs总结:前言 对于前端来说,无论是在...
    99+
    2022-11-13
  • JS如何获取页面URL
    这篇文章主要介绍了JS如何获取页面URL,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一段JS简单获取页面来源地址之前在写ASM的时候要用到...
    99+
    2022-10-19
  • java怎么获取url中的参数值
    在Java中,可以使用`java.net.URL`类来获取URL中的参数值。下面是一个示例代码: import java.net.U...
    99+
    2023-10-25
    java
  • 怎么在javascript中获取url参数
    本篇文章为大家展示了怎么在javascript中获取url参数,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。javascript获取url参数以下JS函数用于获取url参数:function&nbs...
    99+
    2023-06-14
  • Java获取URL地址中传递的参数
    一、 Java获取URL地址中传递的参数 private Map getUrlPramNameAndValue(String url){ String regEx="(\\|&+)(.+)=([^&]*)";//匹配参数名...
    99+
    2023-10-11
    java 开发语言
  • 原生JS获取URL链接参数的几种常见方法
    前言 作为一个前端开发,我们很多时候都需要对URL进行操作和处理,最常见的一种就是获取URL链接中携带的参数值了。使用框架开发的小伙伴可能会觉得这很简单,因为框架提供了很多方法让我们...
    99+
    2022-11-13
  • php如何获取url并且不要参数
    小编给大家分享一下php如何获取url并且不要参数,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!php获取url并且不要参数的方法:1、通过“$_SERVER['HTTP_HOST']”获取域名或主机地址;...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作