【轉】javascript瀏覽器參數的操作，js獲取瀏覽器參數

原文地址：http://www.haorooms.com/post/js_url_canshu

html5修改瀏覽器地址:http://www.cnblogs.com/JiangXiaoTian/articles/3864284.html  注：不支持ie8

作為前端，不可避免的經常對瀏覽器地址進行操作，要獲取瀏覽器的參數，很簡單，方法也很多，我之前經常自己用js的indexof +substr來獲取，這樣獲取相對費事一點，不是很好。今天在這里總結一下瀏覽器參數獲取及參數的操作。

js獲取瀏覽器參數

單純的用js獲取瀏覽器參數比較簡單，我今天介紹一個用正則來寫的獲取參數的方法，相對比較好一些。

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;
    }

就上面這一個小小的函數就可以輕松的搞定！

假如你的地址是:http://www.haorooms.com/uploads/example/urloperate/demo1.html?name=11111&zz=haorooms

調用方法

console.dir(getQueryString("name"));

console.dir(getQueryString("zz"));

谷歌瀏覽器f12 console的輸出結果：

11111
haorooms

該函數用下來的缺點是不支持瀏覽器中有中文，有中文的時候，還是建議用下面的瀏覽器操作方法！

 

根據參數刪除url地址中的參數

 function funcUrlDel(name){
        var loca = window.location;
        var baseUrl = loca.origin + loca.pathname + "?";
        var query = loca.search.substr(1);
        if (query.indexOf(name)>-1) {
            var obj = {}
            var arr = query.split("&");
            for (var i = 0; i < arr.length; i++) {
                arr[i] = arr[i].split("=");
                obj[arr[i][0]] = arr[i][1];
            };
            delete obj[name];
            var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
            return url
        };
    }

 

 

js操作瀏覽器參數

對於js操作瀏覽器參數，我之前用的是UrlEdit來操作瀏覽器參數，記得我第一次運用這個還是2年前，是分頁中對瀏覽器地址的操作。

今天這個方法我也會列出，但是會有更好的函數來對瀏覽器進行操作！

;(function(window, document) {

    var UrlParas = function(url) {
        return UrlParas.fn.init(url);
    }
    UrlParas.VERSION = '1.0.0';
    UrlParas.fn = UrlParas.prototype = {

        url: "",
        pathname: "",
        paras: "",
        init: function(url) {
            this.url = url;
            this.pathname = url.split("?")[0];
            this.paras = this.get();
            return this;
        },

        //以object類型返回url參數及其取值
        get: function(option) {
            var paraStr, paras,
                url = this.url;
            if (url) {
                paraStr = url.split("?")[1];
                if (paraStr) {
                    paras = {};
                    paraStr = paraStr.split("&");
                    for (var n in paraStr) {
                        var name = paraStr[n].split("=")[0];
                        var value = paraStr[n].split("=")[1];
                        paras[name] = value;
                    }
                } else {
                    return {};
                }
                if (!option) {
                    return paras;
                } else {
                    return paras[option] ? paras[option] : "";
                }


            }
        },

        //重設url參數取值，若無此參數則進行創建,若參數賦值為null則進行刪除
        set: function(option) {
            var i, name, val;
            if (arguments.length == 2) {
                name = arguments[0];
                val = arguments[1];
                option = {
                    name: val
                };
            }
            if ("string" === typeof option) {
                this.paras[option] = "";
            } else if ("object" === typeof option) {
                for (i in option) {
                    if (option[i] === null) {
                        delete this.paras[i];
                    } else {
                        this.paras[i] = option[i];
                    }
                }
            } else {

            }
            return this.build();
        },

        //刪除url中指定參數返回新url
        remove: function(option) {
            var i;
            if ("string" === typeof option) {
                option = option.split(",");
                for (i in option) {
                    delete this.paras[option[i]]
                }

            }
            return this.build();
        },

        //根據url和處理過的paras重新構件url
        build: function() {
            var i,
                newUrl = this.pathname + "?";

            for (i in this.paras) {
                newUrl += (i + "=" + this.paras[i] + "&");
            }

            return newUrl.substr(0, newUrl.length - 1);
        }


    }

    UrlParas.fn.init.prototype = UrlParas.fn;

    window.urlParas = UrlParas;

})(window, document);

有朋友不僅要問了，為什么在函數function前面加一個分號？很簡單，是為了將來打包壓縮，要是你不加分號的話，將來要是對js進行壓縮的話，很容易出現問題啊！

//用法示例
testUrl = "http://www.haorooms.com/test/haorooms.html?lang=2&tt=22";
console.log(urlParas(testUrl).get());
console.log(urlParas(testUrl).get("lang"));
console.log(urlParas(testUrl).set("test2","22222"));
console.log(urlParas(testUrl).set("111", "bean"));
console.log(urlParas(testUrl).set({
    "ajax": "ok",
    "lang": null,
    "trswq": null
}));
console.log(urlParas(testUrl).set({
    zcsdf: "zcsdf",
    cesahi: "ceadasdads",
    lang: "zh-cn"
}));
console.log(urlParas(testUrl).remove("lang,tt"));
console.log(urlParas(testUrl).pathname);

瀏覽器URL操作簡單辦法

分解URl

// 正則：
/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/
// 結果格式：
Array 
    [scheme] => http 
    [host] => haorooms.com 
    [user] => user 
    [pass] => pass 
    [path] => /about-me 
    [query] => t=100102 
    [fragment] => hash 
)

// demo:
'http://user:[e-mail]:80/post/?s=css3#first' 
.match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/);
// 結果
["http://user:[e-mail]:80/post/?s=css3#first", "http", "user", "pass", "haorooms.com", "80", "/post/", "s=css3", "first"]

獲取URl參數

function parseUrl(url) {
    // 找到url中的第一個?號
    var parse = url.substring(url.indexOf("?") + 1),
        params = parse.split("&"),
        len = params.length,
        item = [],
        param = {};

    for (var i = 0; i < len; i++) {
        item = params[i].split("=");
        param[item[0]] = item[1];
    }

    return param;
}

// demo:
parseUrl("www.haorooms.com/js?name=haorooms&age=21&page=2")
// 結果
{name: "haorooms", age: "21", page: "2"}

URL參數拼接

/**
 * @description 將傳入的url參數對象解析組裝成字符串做為queryString中的一部分
 * @param {Object} params 請求參數的數組
 * @param {string} cgi 請求串
 * @return {String} queryString部分字符串
 * @example ： param1=value1&param2=value2&param3=value3......
 */
function convert_params(params, cgi){
    var paramsArray = [];
    for (var name in params) {
        if (paramsArray.length == 0) {
            cgi && cgi.indexOf('?') != -1 ? paramsArray.push("&") : paramsArray.push("?");
        }
        else {
            paramsArray.push("&");
        }
        paramsArray.push(name);
        paramsArray.push("=");
        paramsArray.push(params[name]);
    }
    return paramsArray.join("");
}

console.log(convert_params({"param": "value1", "param2": "value2"}, "/post/"));
// ?param=value1&param2=value2
console.log(convert_params({"param": "value1", "param2": "value2"}, "/post/?page=1"));
// &param=value1&param2=value2

獲取URL后面錨點ID

例如：http://www.haorooms.com/#haorooms

有的同學可能還要獲取瀏覽器地址，然后用indexOf獲取到#的位置，然后在拿到#haorooms，或者其他比較繁瑣的辦法，今天講一個最簡單有效的方法，用js自帶方法就可以獲取，一句代碼搞定！

var thisId = window.location.hash;

就可以直接獲取到#haorooms

我們可以進行如下判斷：

 var thisId = window.location.hash;
    if(thisId != "" && thisId != undefined){

    }