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/