地址栏参数操作、方法整理【肖明伟】

地址栏传参是网页之间传递参数最常用的方法，本文旨在整理地址栏参数的获取、修改、添加等。

1、获取地址栏参数

方法一（常用）：

//获取地址栏参数的方法://name:参数名称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;}//调用方法getQueryString("name");

假设url为 http://www.baidu.com/?id=123&type=321&number=222

想获得type值，只需要调用getQueryString("type");

//alert(getQueryString("type")) 可弹出321，以此类推

方法二：

//先要获得页面地址//url:网页地址|ref:参数名称var url = window.location.href;//获取地址栏参数的方法:function getQueryString1(url, ref){    var str = url.substr(url.indexOf('?') + 1);    if (str.indexOf('&') != -1) {        var arr = str.split('&');        for (i in arr) {            if (arr[i].split('=')[0] == ref)                return arr[i].split('=')[1];        }    }    else {        return url.substr(url.indexOf('=') + 1)    }}//调用方法getQueStr(url,"type");

假设地址栏地址为 http://www.baidu.com/?id=123&type=321&number=222

获取到地址为url

想获得type值，只需要调用getQueryString1(url,"type");

//alert(getQueryString1(url,"type")) 可弹出321，以此类推

方法一和方法二比较方法一方法二获取未知参数返回null获取未知参数返回整个url

2、修改地址栏参数

//添加地址栏参数的方法//url:网页地址|ref:想添加的参数名|value:参数值function setQueStr(url, ref, value){    var str = "";    if (url.indexOf('?') != -1)        str = url.substr(url.indexOf('?') + 1);    else        return url + "?" + ref + "=" + value;    var returnurl = "";    var setparam = "";    var arr;    var modify = "0";    if (str.indexOf('&') != -1) {        arr = str.split('&');        for (i in arr) {            if (arr[i].split('=')[0] == ref) {                setparam = value;                modify = "1";            }            else {                setparam = arr[i].split('=')[1];            }            returnurl = returnurl + arr[i].split('=')[0] + "=" + setparam + "&";        }        returnurl = returnurl.substr(0, returnurl.length - 1);        if (modify == "0")            if (returnurl == str)                returnurl = returnurl + "&" + ref + "=" + value;    }    else {        if (str.indexOf('=') != -1) {            arr = str.split('=');            if (arr[0] == ref) {                setparam = value;                modify = "1";            }            else {                setparam = arr[1];            }            returnurl = arr[0] + "=" + setparam;            if (modify == "0")                if (returnurl == str)                    returnurl = returnurl + "&" + ref + "=" + value;        }        else            returnurl = ref + "=" + value;    }    return url.substr(0, url.indexOf('?')) + "?" + returnurl;}//使用方法var urlold = "http://blog.csdn.net/sanai_1992";//获取url地址alert("urlold--" + urlold);//显示url地址var ref = "type";//想要添加的第一个参数：参数名var value = "19";//想要添加的第一个参数：参数值var urlnew = setQueStr(urlold,ref,value);//添加第一个参数alert("urlnew--" + urlnew);//显示第一个参数var ref1 = "index";//想要添加的第二个参数：参数名var value1 = "92";//想要添加的第二个参数：参数值var urlnew1 = setQueStr(urlnew,ref1,value1);//添加第二个参数alert("urlnew1--" + urlnew1);//显示第二个参数

直接将上面的代码粘贴至新建html -> script 标签下即可进行测试。

3、删除地址栏参数

//删除地址栏参数的方法//url:网页地址|ref:想删除的参数名function delQueStr(url, ref){    var str = "";    if (url.indexOf('?') != -1)        str = url.substr(url.indexOf('?') + 1);    else        return url;    var arr = "";    var returnurl = "";    var setparam = "";    if (str.indexOf('&') != -1) {        arr = str.split('&');        for (i in arr) {            if (arr[i].split('=')[0] != ref) {                returnurl = returnurl + arr[i].split('=')[0] + "=" + arr[i].split('=')[1] + "&";            }        }        return url.substr(0, url.indexOf('?')) + "?" + returnurl.substr(0, returnurl.length - 1);    }    else {        arr = str.split('=');        if (arr[0] == ref)            return url.substr(0, url.indexOf('?'));        else            return url;    }}var urlold = "http://blog.csdn.net/sanai_1992?type=19&index=92"; //获取url地址alert(urlold);//显示获取到的url地址var urlnew = delQueStr(urlold,"type");//删除url地址中的 id 参数alert(urlnew);//显示删除后的url地址

直接将上面的代码粘贴至新建html -> script 标签下即可进行测试。

欢迎评论交流，如果其他方法，欢迎提供。