（巨好使，详细，解析URl，URl自定义传参）js URl中快速自定义传参，并且实现参数解析修改和新增，替换功能

た入场券 2023-10-09 14:52 33阅读 0赞

## 背景 ##

我们在日常开发中经常会遇到要对url中的参数进行修改和新增，但是自己手动每次敲就会导致代码很麻烦，且不易维护

**而且可能会遇到一些特殊的需求，需要携带固定参数，进行页面的多次跳转这种情况（！！！）**

## 方法 ##

### 1.解析url中的参数（将正确的url地址输进去，自动返回解析以后的参数） ###

//获取url路径中的参数
    const getQuery = (url) => {
        // result为存储参数键值的集合
        const result = {}
        //建立正则匹配路径中有没有问号
        var reg = /\?/g
        if (reg.test(url)) {
            // str为？之后的参数部分字符串
            const str = url.substr(url.indexOf('?') + 1)
            // arr每个元素都是完整的参数键值
            const arr = str.split('&')
            for (let i = 0; i < arr.length; i++) {
                // item的两个元素分别为参数名和参数值
                const item = arr[i].split('=')
                result[item[0]] = item[1]
            }
        }
        return result
    }

### 2. 进行url参数的修改，更新，以及覆盖功能 ###

const chanUrlData = (hostUrl='',orignJson={},newJson={}) => {
        //快速自定义url路径中的参数的原理，首先将url中的数据json获取下来，然后通过遍历将url中的数据进行新增和覆盖
        //1. hostUrl='链接的host地址（链接'?'之前的部分） https://blog.csdn.net/qq_59747594/article/details/126397187'
        //2. orignJson='链接中问号后面的json数据' {name:wang,sex:1}
        //3. newJson='自定义在url里面路径的参数' {name:wangzhaoyang,money:1000000}
        for (let x in newJson) {
            orignJson[x] = newJson[x]
        }
        var newDataJson=[]//用来接收最新的生成url参数数据
        for (var item in orignJson) {
            newDataJson.push(item + '=' + orignJson[item])
        }
        if(newDataJson.length>0){
            return hostUrl+'?'+newDataJson.join('&')
        }else{
            return hostUrl
        }
    }

## 使用（仔细体会一下结果的那张截图） ##

var urlStr='https://blog.csdn.net/qq_59747594/article/details/126397187?name=wang&sex=1'
    console.log(getQuery(urlStr))
    console.log(chanUrlData(urlStr.split('?')[0],getQuery(urlStr),{
        name:'wangzhaoyang',
        money:10000000
    }))

![b149521a22624260af87ee8a26355dd4.png][]

### 解释 ###

就是为什么方法一和方法二我没有写在一块，那样不更简单吗，其实不然，因为在某些特殊的情况下，不需要进行url的解析直接就**可以更简单拿到url中的数据**

window.local[（最方便兼容各种js）拿到路径全部信息（hash，host，hostname，href，origin，pathname，port，protocol）以及跳转路由\_\_揽的博客-CSDN博客\_js获取路由hash][js_hash_host_hostname_href_origin_pathname_port_protocol_-CSDN_js_hash]

uniapp，微信中

var pages = getCurrentPages();//获取所有页面的数组对象
    var currPage = pages[pages.length - 1]; //当前页面
    var beforePage= pages[pages.length - 2]; //上一个页面

[（uniapp跳转回显）,A页面进入B页面，B页面返回A页面，并传值给A页面（技巧绝对好用慢慢看）\_\_揽的博客-CSDN博客\_uniapp 页面返回传值][uniapp_A_B_B_A_A_-CSDN_uniapp]

[b149521a22624260af87ee8a26355dd4.png]: https://img-blog.csdnimg.cn/b149521a22624260af87ee8a26355dd4.png
[js_hash_host_hostname_href_origin_pathname_port_protocol_-CSDN_js_hash]: https://blog.csdn.net/qq_59747594/article/details/125663295?spm=1001.2014.3001.5502
[uniapp_A_B_B_A_A_-CSDN_uniapp]: https://blog.csdn.net/qq_59747594/article/details/125954924?spm=1001.2014.3001.5502