地址欄參數操作、方法整理【肖明偉】

地址欄傳參是網頁之間傳遞參數最常用的方法，本文旨在整理地址欄參數的獲取、修改、添加等。

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 標籤下即可進行測試。

歡迎評論交流，如果其他方法，歡迎提供。