JS获取URL中参数值(QueryString)的4种方法分享


Posted in Javascript onApril 12, 2014

方法一:正则法

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://w3water.com/?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 = 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 相关文章推荐
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
angularjs基础教程
Dec 25 Javascript
动态加载jQuery的方法
Jun 16 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
javascript对JSON数据排序的3个例子
Apr 12 #Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 #Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 #Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 #Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 #Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 #Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 #Javascript
You might like
如何判断php数组的维度
2013/06/10 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
浅说js变量
2011/05/25 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
JS数组求和的常用方法实例小结
2019/01/07 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
原生js实现分页效果
2020/09/23 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python切片用法实例教程
2014/09/08 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
详解Python装饰器
2019/03/25 Python
python画微信表情符的实例代码
2019/10/09 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
自我评价的正确写法
2013/09/19 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
社会保险接收函
2014/01/12 职场文书
《雾凇》教学反思
2014/02/17 职场文书
学习决心书范文
2014/03/11 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
网吧员工管理制度
2015/08/05 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫