【转】javascript浏览器参数的操作，js获取浏览器参数

2022-12-07 13:58:43

原文地址：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){

    }

码农公寓