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参数值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用uni-app和uView实现多图上传功能全过程

    利用uni-app和uView实现多图上传功能全过程

    最近在使用uniapp开发的微信小程序中使用了图片上传功能,下面这篇文章主要给大家介绍了关于利用uni-app和uView实现多图上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • JavaScript实现echarts水球图百分比展示大屏可视化

    JavaScript实现echarts水球图百分比展示大屏可视化

    这篇文章主要为大家介绍了JavaScript实现echarts水球图百分比展示大屏可视化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 如何通过javaScript去除字符串两端的空白字符

    如何通过javaScript去除字符串两端的空白字符

    这篇文章主要介绍了如何通过javaScripte去除字符串两端的空白字符,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JS中定位 position 的使用实例代码

    JS中定位 position 的使用实例代码

    本文通过实例代码给大家介绍了JS中定位 position 的使用,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-08-08
  • javascript异步编程

    javascript异步编程

    如果编程加入了时间的概念就一切变得非常复杂。通常我们的程序是飞快地解析执行,一毫秒紧接着一毫秒,从上至下地执行,这称之为同步。但如果我们想让后台的程序不等前面的程序执行,就执行呢,于是就有了异步的概念。
    2010-06-06
  • js正则test匹配的踩坑及解决

    js正则test匹配的踩坑及解决

    这篇文章主要为大家介绍了正则test匹配的踩坑示例讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)

    解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safa

    在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的<option>,并拆分成多个节点,这样会造成select的出错
    2010-05-05
  • JS实现环形进度条(从0到100%)效果

    JS实现环形进度条(从0到100%)效果

    这篇文章主要介绍了JS实现环形进度条(从0到100%)效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • Javascript无参数和有参数类继承问题解决方法

    Javascript无参数和有参数类继承问题解决方法

    这篇文章主要介绍了Javascript无参数和有参数类继承问题解决方法,本文讲解了无参数类继承的问题和有参类继承的问题,并给出了解决方案,需要的朋友可以参考下
    2015-03-03
  • JavaScript面试必备技巧之手写一个Promise

    JavaScript面试必备技巧之手写一个Promise

    很多同学在面试的时候都会被要求手写一个Promise,那么今天我总结了一些手写Promise的方法,可以跟着我的思路一起来实现一个Promise,让我们的面试更有把握
    2023-02-02

最新评论