WebKong的网络日志

分享工作中的所用、所想、所感。

0%

JavaScript实现获取URL参数

通过 JavaScript 来获取 url 上携带的参数

假设 url=”http://xxx.com.cn?name=webkong&age=23&sex=男"

第一种,直接 js 函数,截取 url,拼装成对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function GET(){
var url = window.document.location.href.toString();
var u = url.split("?");
if(typeof(u[1]) == "string"){
u = u[1].split("&");
var get = {};
for(var i in u){
var j = u[i].split("=");
get[j[0]] = j[1];
}
return get;
}else {
return {};
}
};

var getParam = GET(); //通过变量保存参数对象
//getParam:{
name:"webkong",
age:"23",
sex:"男"
}

和第一种逻辑过程一样,只是结果是对象本身

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var $_GET = (function(){
var url = window.document.location.href.toString();
var u = url.split("?");
if(typeof(u[1]) == "string"){
u = u[1].split("&");
var get = {};
for(var i in u){
var j = u[i].split("=");
get[j[0]] = j[1];
}
return get;
} else {
return {};
}
})();

// 使用时, 可以直接 $_GET['name'], 就直接获得name值

第二种,通过正则来匹配

1
2
3
4
5
6
7
8
//通过传递参数来获取url上的某一个参数值
function GET(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r!=null) return unescape(r[2]);
return null; //返回参数值
}
//调用 GET('name');

或者扩展成 jQuery

1
2
3
4
5
6
7
8
9
(function($){
$.getUrlParam= function(name){
var reg = new RegExp("(^|&)"+name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]);
return null;
}
})(jQuery);

大概有这 4 种封装方式,可以任意搭配封装方式和逻辑代码