【转】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:pass@haorooms.com:80/post/?s=css3#first' 
.match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/);
// 结果
["http://user:pass@haorooms.com: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){

    }

posted @ 2016-12-12 16:55 ice.ko 阅读(5168) 评论(0) 编辑收藏举报

刷新页面返回顶部