码迷,mamicode.com
首页 > Web开发 > 详细

js获取地址栏URL上的参数

时间:2017-12-16 17:12:09      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:地址   pos   ret   获取   字符   get   asc   结束   one   

获取地址栏上的URL参数现在最简单通用的方法应该就是下面这种了。
function getUrlParam (name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]); return null;
}
// 使用方法就是:http://www.test.com?a=123&b=231
var a = getUrlParam('a')            // a = 123
var b = getUrlParam('b')            // b = 231

不过这种方法是有缺陷的,它不能识别URL中值带&或=,例如:http://www.test.com?a=1&23&b=231 在这里我们
a参数定的值为“1&23”,
如果还用上面的方法获取的话:
a = 1
为什么呢,这就要解析一波这个方法的原理

// 首先是获取URL
var r = window.location.search.substr(1);
// window.location.search.substr(1)可以获取URL?后面的字符串例如:http://www.test.com?a=123&b=231得到的会是:a=123&b=231
// 然后再用正则获取各个参数下的值
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
// 1.这里的(^|&)会匹配开头为空或&的字符
// 2.+ name + 这里是匹配你要找的参数名
// 3.([^&]*)这里是匹配“参数=”后面非&的字符
// 4.(&|$)这里匹配以空或&结束的字符
// 这里4个条件就把a=123&b=231里的a=123&或&b=231找出来了
r = r.match(reg);
// 这里match方法可以把符合正则的字符找出来,是以数组形式给出,例如我们要找的是a的话:
/*
    [
    'a=123&',                   // 这里是整个正则匹配出来的
    '',                         // 这里是(^|&)匹配出来的
    '123',                      // 这里是([^&]*)匹配的
    '&'                         // 这里是(&|$)匹配的
    ]
*/
// 我们需要的就是第三个([^&]*)匹配的字符
decodeURIComponent(r[2])            // 这里拿到数组的第三个值再用decodeURIComponent转码

-就是如此要是再a=123&中提前遇到&就是提前终止。导致http://www.test.com?a=1&23&b=231 中a的值为1

那要怎么避免呢,这里就要修改一下正则

var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
// 这里前面的'(^|&)' + name + '='这段还是不变的。
// 不过([^&]*)这里对&的限制要解除才行。不能让它只匹配非&字符。所以改为([.*])匹配任何字符(这样说可能不是很严谨)
// (&|$)这里的最后不能通过&或空判断,应该是&xxx=这种结尾。所以改为(&[^&=]+=|$)匹配,这里的意思为&开头=结尾中间夹着非”&和=“的其他字符。这就满足我们的要求了。
// 最终的正则表达式应该是:
var reg = new RegExp('(^|&)' + name + '=(.*)(&[^&=]+=)');
// 不过这样匹配不到最后一个参数,因为最后一个是空结尾而不是"&xxx=",所以要写多一个匹配最后一个参数的正则
var reg = new RegExp('(^|&)' + name + '=(.*)($)');

整个全新的方法是:

function getUrlParam (name) {
  var reg = new RegExp('(^|&)' + name + '=(.*)(&[^&=]+=)');
  var regLast = new RegExp('(^|&)' + name + '=(.*)($)');
  var r = window.location.search.substr(1).match(reg) || window.location.search.substr(1).match(regLast);
  if (r != null) return decodeURIComponent(r[2]);
  return null;
}

有什么错误请指出。。

js获取地址栏URL上的参数

标签:地址   pos   ret   获取   字符   get   asc   结束   one   

原文地址:http://www.cnblogs.com/suyuanli/p/8046783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!