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

原文地址: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){ }
上一篇:在vscode中配置LeetCode插件,从此愉快地刷题


下一篇:iOS开发--应用设置及用户默认设置【1、bundle的运用】