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

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

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

https://www.baidu.com/baidu?wd=%C6%E2%C7%E0%F1%C6+csdn&tn=monline_dg 在这个URL中 ？ 后的字符串wd=%C6%E2%C7%E0%F1%C6+csdn&tn=monline_dg即为查询字符串。

相关代码请到github查看。

        (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);

执行结果

可以看出，urlParas对测试URL进行了 截取查询字符、增加查询字符串、删除查询字符串等操作。

注意：这里有一个查询参数中如果有中文，则必须编码的问题，解决办法请查看我的博客