url参数解析重新赋值并输出

543 阅读1分钟
实际开发中遇到的需求:对url进行解析,对其中某个特定参数进行修改后前端访问,解决方案如下:
// 获取?前的url
            function getUrlPath() {
                var url = document.location.toString();
                var localUrl = url.split("?");
                return localUrl[0];
            }
// 键值对拆分参数
            var url = document.location.toString();
            function getUrlParams(url) {
                if (decodeURIComponent(url).indexOf("?") > -1) {
                    var result = [];
                    var urlParamsArr = decodeURIComponent(url).split("?");
                    urlParamsArr.shift();
                    let newUrlParamsArr = urlParamsArr.join("&").split("&");
                    for (var i = 0; i < newUrlParamsArr.length; i++) {
                        var paramKey = newUrlParamsArr[i].split("=")[0];
                        var paramValue = newUrlParamsArr[i].split("=")[1];
                        result.push({
                            key: paramKey,
                            value: paramValue
                        })
                    }

                    return result;
                } else {
                    console.log("该URL中不含参数")
                }
            }
// 赋值拼接
            function remixUrl(){
                var basicUrl=getUrlPath();
                var params= getUrlParams(url);
                var str='?';
                for(let obj of params){
                    // 如果重新赋值在这里做判断
                    str+=obj.key+'='+obj.value+'&';
                }
                str=str.substring(0,str.length-1);
                console.log(basicUrl+str);
            }
            remixUrl();