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

原創

2020-02-20 14:44

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