js根据地址栏参数名称获取对应的值 getQueryString(name)

js根据地址栏参数名称获取对应的值getQueryString(name)

  • 方法一
//name:参数名称,return:有则返回该参数对应值,没有则返回null
function GetQueryStr(name) {    
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
     if(r != null) {
     	return  unescape(r[2]);
     } 
     return null;
}
//然后调用这个方法,传入相对应的参数名称,就可以获取对应的值
  • 方法二
function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串,包括?
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];
  • 方法三(单个参数的获取方法)
function GetRequest() {
   var url = location.search;  //获取url中"?"符后的字串
   if (url.indexOf("?") != -1) {  //判断是否有参数
      var str = url.substr(1);  //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
      strs = str.split("=");  //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
      alert(strs[1]);  //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
   }
}

原文链接:https://blog.youkuaiyun.com/weixin_30888027/article/details/95487549

<think>好的,我现在需要解决用户的问题:如何用JavaScript从URL中提取start_date和end_date参数。首先,我得回顾用户之前的对话历史,看看有没有相关的信息可以借鉴。用户之前提到在Spring Boot中使用@RequestParam来获取参数,现在转向JavaScript,可能需要类似的解析方法。 首先,用户提供的引用内容中提到了JavaScript的Date处理,比如new Date()和时间戳的获取,但用户当前的问题是关于URL参数提取,所以这些引用可能不是直接相关,但也许在后续处理日期参数时会用到。 接下来,我需要考虑JavaScript中如何解析URL参数。常见的做法是使用URLSearchParams API,或者手动解析location.search。用户可能希望一个简单有效的方法,所以应该优先推荐现代浏览器支持的URLSearchParams,因为它更简洁。 然后,用户可能需要兼容旧浏览器的解决方案,所以提供一个备用的解析函数也是有必要的。比如,手动分割字符串,遍历参数对,存储到对象中。这样即使在不支持URLSearchParams的环境下也能工作。 另外,用户提到的参数是start_date和end_date,这两个参数可能被用来构造日期对象,所以可能需要验证或转换日期格式。不过用户当前的问题只是获取参数,暂时不需要处理日期转换,但或许可以提到后续处理时需要注意的地方,比如使用Date.parse或new Date()来转换字符串为日期对象。 还要考虑URL中的参数可能存在编码的情况,比如空格被转为%20,但URLSearchParams会自动解码这些,所以不需要手动处理decodeURIComponent,但如果是手动解析的话,可能需要用到。 用户之前的回答中提到了Spring Boot的参数绑定和校验,可能在JavaScript中也需要类似的参数存在性检查,比如检查获取是否为undefined,或者是否为空字符串,给出提示或默认。 最后,根据用户之前的习惯,可能需要提供完整的代码示例,包括解析参数和基本校验,同时生成相关问题,比如如何处理多参数、处理特殊字符或日期格式转换的问题。 总结步骤: 1. 使用URLSearchParams解析参数,简洁现代的方法。 2. 提供兼容旧浏览器的备用解析方案。 3. 处理参数不存在的情况,给出提示。 4. 示例代码包括两种解析方式。 5. 提到后续可能需要的日期处理,比如转换为Date对象。 6. 生成相关问题,覆盖参数处理的其他常见问题。</think>在JavaScript获取URL参数可以通过以下方法实现: ### 一、现代浏览器推荐方案(URLSearchParams API) ```javascript // 获取当前页面URL参数 const urlParams = new URLSearchParams(window.location.search); // 提取目标参数 const startDate = urlParams.get('start_date'); // 输出:'2025-07-01' const endDate = urlParams.get('end_date'); // 输出:'2025-12-31' // 参数存在性验证 if (!startDate || !endDate) { console.warn('缺少必要的时间范围参数'); } ``` ### 二、兼容旧浏览器的实现方案 ```javascript function getUrlParams() { const params = {}; const queryString = window.location.search.slice(1); const pairs = queryString.split('&'); pairs.forEach(pair => { const [key, value] = pair.split('='); params[decodeURIComponent(key)] = decodeURIComponent(value || ''); }); return params; } // 使用示例 const params = getUrlParams(); console.log(params.start_date); // 输出:'2025-07-01' console.log(params.end_date); // 输出:'2025-12-31' ``` ### 三、日期参数处理建议 获取参数后建议转换为Date对象: ```javascript const startDateObj = new Date(startDate); // 转换为Date类型 const endDateObj = new Date(endDate); // 验证日期有效性 if (isNaN(startDateObj.getTime())) { throw new Error('起始日期格式无效'); } ``` ### 四、完整示例代码 ```javascript // 组合式解决方案 function getPeriodParams() { const params = window.URLSearchParams ? Object.fromEntries(new URLSearchParams(location.search)) : getUrlParams(); return { start: params.start_date ? new Date(params.start_date) : null, end: params.end_date ? new Date(params.end_date) : null }; } // 使用示例 try { const { start, end } = getPeriodParams(); console.log('时间范围:', start?.toISOString(), '-', end?.toISOString()); } catch (e) { console.error(e.message); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值