jQuery/Zepto.js获取URL参数值/多个同名参数值

摘要

本文介绍了用jQuery/Zepto.js获取URL参数值或多个同名参数值的方法，同时提供了思路及源码。该方法不仅可以获取URL单个参数值，还能以数组的形式返回URL中多次出现的同名参数值。

需求

从URL中获取想要的参数对应的参数值，若URL包含想要的参数值，则返回字符串形式的参数值；若想要的参数出现多次，则返回包含所有参数值字符串的数组；没有则返回null对象。

示例

网址：http://huzexin.com?a=1&b=1&b=2&b=3
getUrlVal(“a”)，返回字符串：1；
getUrlVal(“b”)，返回字符串数组：[“1”,”2”,”3”]；
getUrlVal(“c”)，返回null对象：null。

源码

function getUrlVal(para){
var search=location.search; //页面URL的查询部分字符串
var arrPara=new Array(); //参数数组。数组单项为包含参数名和参数值的字符串，如“para=value”
var arrVal=new Array(); //参数值数组。用于存储查找到的参数值

if(search!=""){
var index=0;
search=search.substr(1); //去除开头的“?”
arrPara=search.split("&");

for(i in arrPara){
var paraPre=para+"="; //参数前缀。即参数名+“=”，如“para=”
if(arrPara[i].indexOf(paraPre)==0&& paraPre.length<arrPara[i].length){
arrVal[index]=decodeURI(arrPara[i].substr(paraPre.length)); //顺带URI解码避免出现乱码
index++;
}
}
}

if(arrVal.length==1){
return arrVal[0];
}else if(arrVal.length==0){
return null;
}else{
return arrVal;
}
}

建议将我们写的“function getUrlVal(para)”方法放到公共的JS文件里。这样，引用了该JS文件的网页都可以使用我们创建的方法了。

参考

[1] W3Cschool的“JavaScript 和 HTML DOM 参考手册”：https://www.w3cschool.cn/jsref/
[2] W3Cschool的“jQuery教程”：https://www.w3cschool.cn/jquery/
[3] Zepto.js官网：http://zeptojs.com/