本文共 4403 字，大约阅读时间需要 14 分钟。

HTTP-URL中查询字符串格式化

GET请求是最常见的请求类型，常用语向服务器查询某些信息。必要时，需要将查询字符串追加到URL末尾。有的时候为了根据URL中查询字符串的不同渲染不同的页面也需要读取URL中的查询字符串。如何避免在URL写入查询字符串时报出格式错误 及 如何更快捷读出URL中查询字符串就是这篇博客要解决的问题。

在这个URL中 ？ 后的字符串wd=%C6%E2%C7%E0%F1%C6+csdn&tn=monline_dg即为查询字符串。

相关代码请到查看。

(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);        //使用        testUrl = "https://www.baidu.com/baidu?wd=%C6%E2%C7%E0%F1%C6+csdn&tn=monline_dg";        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);

执行结果