修改url中参数的值 太过爱你忘了你带给我的痛 2022-08-20 10:30 178阅读 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 今天再次使用到这个 发现一个特别好用的方法: 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][_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
还没有评论,来说两句吧...