修改url中参数的值
之前都是先取 window.location.href的值 然后取匹配关键字
近日在mdn上面发现了一个简便方法获取url中参数的值. 请点击这个链接找到例子6
或者直接看这段代码(摘自MDN):
function loadPageVar (sVar) {
return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
alert(loadPageVar("name"));
获取到该参数的值,然后 用js的replace去替换吧,目前没有发现其他更好的办法
2016-03-29 今天再次使用到这个 发现一个特别好用的方法:
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
或者参考github上的这个开源项目 https://github.com/sindresorhus/query-string
-------------------------------------分割线-----------------------------------------
但是在使用途中遇到了两个问题:
1,实际上现在我们的需求是如果添加的parameter 的value 为空的时候 就不应该放到url里面,不然看起来特冗余且丑陋,
2,每一次我们都需要添加一个key value 特麻烦,于是将方法做了一个小小的改造,核心还是引用他们的.
1,first step:
辅助方法 不变,获取url中某参数的值,请注意返回的值是解码后的url匹配值:
//辅助方法 获取url中参数的值
function loadPageVar (sVar) {
return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
2,second step:
修改url中参数的值,上面原po主没有处理传入参数的值为空的情况,我用最蠢的办法过滤了一下,请注意传入的url是要先解码,因为第一个辅助方法 loadPageVar返回值是解码后的匹配值:
//更新url中的参数,传为空则不会拼接到url中去 ,请注意 该方法传入的uri需要解码,不然会匹配不到
function updateQueryStringParameterNew(uri, key, value) {
//待修改 不严谨
if(value==''||value==null){
var oldValue=loadPageVar(key);
return uri.indexOf('&'+key+'='+oldValue)!=-1?uri.replace('&'+key+'='+oldValue,''):uri.replace(key+'='+oldValue,'');
}
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");//忽略大小写
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
3,third step:
一个一个值的传入修改url 特繁琐,咱们先将传入的各个参数丢到一个对象里面,然后去单个处理 最后返回一个url
//将多个参数以对象的方式传入方法,得到最终的url
function handleUrl(parameterObj,url){
var keys=Object.keys(parameterObj);
var localurl=url;
for(var index in keys){
localurl=updateQueryStringParameterNew(localurl,keys[index],parameterObj[keys[index]]);
}
return localurl;
}
在最后 咱们需要引入这三个公共方法 到帮助类里面.然后调用 handlerUrl方法,再强调一次 传入的url 需要解码.不然会匹配不到
参考 : https://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter