获取网址后携带的参数

一、获取单个参数 

//例如:http://127.0.0.1:8020/007/homepage.html?userid=1922889

//获取地址栏后的参数方法
function _get(name){     
	var  reg = new  RegExp("(^|&)" + name + "=([^&]*)(&|$)");     
	var  r = window.location.search.substr(1).match(reg);     
	if(r != null){
		return   unescape(r[2]);
	}else{
		return  "";
	}
};

//使用
var id = _get('userid ');

二、获取多个参数 

转载链接:https://blog.youkuaiyun.com/xiaoxiong_jiaxin/article/details/84317949

function getUrlSearch(name) {
  // 未传参,返回空
  if (!name) return null;
  // 查询参数:先通过search取值,如果取不到就通过hash来取
  var after = window.location.search;
  after = after.substr(1) || window.location.hash.split('?')[1];
  // 地址栏URL没有查询参数,返回空
  if (!after) return null;
  // 如果查询参数中没有"name",返回空
  if (after.indexOf(name) === -1) return null;
 
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 当地址栏参数存在中文时,需要解码,不然会乱码
  var r = decodeURI(after).match(reg);
  // 如果url中"name"没有值,返回空
  if (!r) return null;
 
  return r[2];
}
 
// 调用方法
getUrlSearch("参数名");
 
// 举例1:若地址栏URL为:abc.html?id=123&name=池子&url=http://www.baidu.com
console.log('地址栏参数id',getUrlSearch("id"));
console.log('地址栏参数name',getUrlSearch("name"));
console.log('地址栏参数url',getUrlSearch("ursl"));
// 123
// 池子(不解码此处是乱码)
// null
 
 
// 举例2:若地址栏URL为:abc.html
console.log('地址栏参数id',getUrlSearch("id"));
// null

 

<think>好的,我需要帮助用户解决如何用JavaScript获取当前页面URL中的query参数的问题。首先,我得回顾一下用户提供的参考资料,看看里面提到的方法有哪些。 用户引用了四个资料,其中提到几种不同的方法。引用[1]和[2]提到了传统的方法,比如分割字符串和使用正则表达式。引用[3]和[4]则提到了更现代的方式,比如使用URLSearchParams和ArcGIS的urlUtils,不过后者可能不太通用。 首先,我应该先考虑原生的JavaScript方法。根据引用[3],URLSearchParams是一个现代API,可以方便地处理URL参数。用户可能想要一个简单且兼容性较好的解决方案。但需要检查浏览器的兼容性,不过现在大多数现代浏览器都支持URLSearchParams。 然后,传统的字符串分割方法也是一个备选,特别是如果用户需要支持旧版浏览器的话。比如,通过split('?')来获取参数部分,再进一步分割每个参数。引用[1]中的例子就是这样的步骤。 另外,正则表达式的方法可以处理更复杂的情况,比如带有特殊字符的参数值。引用[2]的链接可能提供了相关的正则表达式方法,但用户没有给出具体内容,可能需要假设。 ArcGIS的urlUtils可能是一个特定库的方法,但用户的问题是关于纯JavaScript的,所以可能不需要提到这个,除非用户明确使用该库。但引用[4]的例子显示如何用esri/urlUtils来解析,但考虑到通用性,可能应该放在最后作为扩展方法。 接下来,我需要组织回答的结构。首先介绍最推荐的方法,比如URLSearchParams,然后提供传统方法作为备选。同时,注意代码示例的正确性,确保使用中文注释或解释。 还需要考虑如何获取当前页面的URL,用户可能需要的是window.location.search,而不是传入一个URL字符串。比如,在引用[3]的例子中,函数接受URL参数,但用户可能需要的是当前页面的,所以应该调整代码示例,使用window.location.search。 此外,需要提到如何处理多个参数,比如通过循环或者直接转换成对象。引用[3]中的例子使用了URLSearchParams和Object.fromEntries,这是一个简洁的方法。 最后,要确保回答符合用户的要求,结构清晰,分步骤说明,并引用相关的资料。同时生成相关问题,可能涉及不同方法的比较、处理特殊字符的情况,或者如何在没有URLSearchParams的情况下实现。</think>### 如何用 JavaScript 获取 URL 中的 query 参数? 以下是几种常用方法,逐步说明实现过程: --- #### **方法 1:使用 `URLSearchParams`(推荐)** 现代浏览器原生支持的 API,语法简洁且可扩展性高。 ```javascript // 获取当前页面的查询参数(如 ?name=张三&age=20) const params = new URLSearchParams(window.location.search); // 获取单个参数值 const name = params.get('name'); // 返回 "张三" // 遍历所有参数 params.forEach((value, key) => { console.log(key, value); }); // 转换为对象 const paramsObj = Object.fromEntries(params.entries()); ``` **优点**:支持复杂参数(如数组、特殊符号),代码简洁[^3]。 --- #### **方法 2:传统字符串分割** 适用于简单场景或需要兼容老旧浏览器的环境。 ```javascript function getQueryParams() { const search = window.location.search.substring(1); // 去掉开头的 "?" const pairs = search.split('&'); // 分割为键值对数组 const result = {}; for (const pair of pairs) { const [key, value] = pair.split('='); result[decodeURIComponent(key)] = decodeURIComponent(value || ''); } return result; } const params = getQueryParams(); console.log(params.age); // 输出 "20" ``` **注意**:需手动处理 `decodeURIComponent` 解码特殊字符(如空格、中文)[^1]。 --- #### **方法 3:正则表达式提取** 适用于需要精确匹配特定参数的场景。 ```javascript function getParam(name) { const regex = new RegExp(`[?&]${name}=([^&]*)`); const match = window.location.search.match(regex); return match ? decodeURIComponent(match[1]) : null; } const userName = getParam('name'); // 返回 "张三" ``` **优点**:性能高效,适合仅需少量参数的情况[^2]。 --- #### **扩展:第三方库(如 ArcGIS API)** 若项目中已使用特定库(如 ArcGIS),可直接调用其工具: ```javascript require(["esri/urlUtils"], (urlUtils) => { const urlObj = urlUtils.urlToObject(window.location.href); console.log(urlObj.query.department); // 输出参数值 }); ``` **适用场景**:与库深度集成的项目[^4]。 --- ### 总结对比 | 方法 | 适用场景 | 复杂度 | 兼容性 | |--------------------|----------------------------|--------|---------------| | `URLSearchParams` | 现代浏览器、复杂参数处理 | 低 | IE 不兼容 | | 字符串分割 | 简单参数、兼容老旧浏览器 | 中 | 全兼容 | | 正则表达式 | 精准提取少量参数 | 高 | 全兼容 | ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值