修改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;
    }
}

这段代码来自 stackoverflow:  http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter

或者参考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