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进行了 截取查询字符、增加查询字符串、删除查询字符串等操作。

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