JavaScript实现获取URL中参数值的4种方法

 更新时间:2025年02月07日 10:53:35   作者:Java全栈布道师  
这篇文章主要为大家详细介绍了如何使用JavaScript实现获取URL中参数值的4种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下

在前端开发中,处理URL参数是一个常见的任务,尤其是在没有框架支持的情况下。这篇文章为大家整理了JavaScript获取URL中参数值的4种方法,希望对大家有所帮助

方法一:正则法

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 这样调用:
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

方法二:split拆分法

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'];

方法三:正则(推荐使用)

通过JS获取url参数,这个经常用到。比如说一个url:http://wwww.jb51.net/?q=js,我们想得到参数q的值,那可以通过以下函数调用即可。

function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
    var context = "";
    if (r != null)
        context = decodeURIComponent(r[2]);
    reg = null;
    r = null;
    return context == null || context == "" || context == "undefined" ? "" : context;
}
alert(GetQueryString("q"));

方法四:单个参数的获取方法

function GetRequest() {
   var url = location.search; //获取url中"?"符后的字串
   if (url.indexOf("?") != -1) {    //判断是否有参数
      var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
      strs = str.split("=");   //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
      alert(strs[1]);          //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
   }
}

到此这篇关于JavaScript实现获取URL中参数值的4种方法的文章就介绍到这了,更多相关JavaScript获取URL参数值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈js函数中的实例对象、类对象、局部变量(局部函数)

    浅谈js函数中的实例对象、类对象、局部变量(局部函数)

    下面小编就为大家带来一篇浅谈js函数中的实例对象、类对象、局部变量(局部函数)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 原生JS控制多个滚动条同步跟随滚动效果

    原生JS控制多个滚动条同步跟随滚动效果

    本文要探讨的是,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动
    2017-12-12
  • 基于JS实现二维码名片生成的示例代码

    基于JS实现二维码名片生成的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现生成二维码名片的功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以动手尝试一下
    2022-06-06
  • 微信小程序实现张图片合成为一张并下载

    微信小程序实现张图片合成为一张并下载

    这篇文章主要为大家详细介绍了微信小程序实现张图片合成为一张并下载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript列表获取指定范围值的N种方法

    JavaScript列表获取指定范围值的N种方法

    在日常开发中,我们经常需要从数组中提取指定范围的值,本文为大家总结了一下 JS 中获取数组指定范围值的所有方法,文中的示例代码讲解详细,有需要的小伙伴可以了解下
    2026-05-05
  • bootstrap时间插件daterangepicker使用详解

    bootstrap时间插件daterangepicker使用详解

    这篇文章主要为大家详细介绍了bootstrap时间插件daterangepicker使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • javascript如何删除所有事件监听器

    javascript如何删除所有事件监听器

    这篇文章主要介绍了javascript 删除所有事件监听器,文中还通过示例代码介绍了javaScript删除对象属性总结方法,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 微信小程序如何保证每个页面都已经登陆详解

    微信小程序如何保证每个页面都已经登陆详解

    前段时间发布了一个微信小程序的简单登录,但遇到一个问题,怎么确保用户每个页面都已经登陆了呢,这篇文章主要给大家介绍了关于微信小程序如何保证每个页面都已经登陆的相关资料,需要的朋友可以参考下
    2021-11-11
  • Ionic快速安装教程

    Ionic快速安装教程

    Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用,感兴趣的朋友一起看看吧
    2016-06-06
  • JS操作COOKIE实现备忘记录的方法

    JS操作COOKIE实现备忘记录的方法

    这篇文章主要介绍了JS操作COOKIE实现备忘记录的方法,涉及JavaScript针对cookie的读写操作相关技巧,需要的朋友可以参考下
    2016-04-04

最新评论