修改url中参数的值

太过爱你忘了你带给我的痛 2022-08-20 10:30 224阅读 0赞

之前都是先取 window.location.href的值 然后取匹配关键字

近日在mdn上面发现了一个简便方法获取url中参数的值.  请点击这个[**链接**][Link 1]找到例子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  今天再次使用到这个 发现一个特别好用的方法:

这段代码来自 stackoverflow: [  http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter][_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

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location
[_http_stackoverflow.com_questions_5999118_add-or-update-query-string-parameter]: http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter