js操作Url方法汇总

获取URL参数

一行代码装起来(URLSearchParams)

const getParams = (url = location.href) => {
    return Object.fromEntries(new URLSearchParams(url.substring(url.indexOf('?'))))
}

遍历searchParams

const getParams = (url = location.href) => {
    let res = {}
    let dealUrl = new URL(url).searchParams
    for (let key of dealUrl.entries()) {
        res[key[0]] = key[1]
    }
    return res
}

正则获取

1.正则区别/(\w+)=(\w+)/无法获取参数中的中文

const getParams = (url = location.href) => {
    let arr = url.match(/([^?=&]+)=([^=&]+)/gi);
    let obj = {};
    arr.map(item => {
        let [key, value] = item.split("=");
        obj[key] = value;
    })
    return obj;
}

const getParams = (url = location.href) => {
    const res = {}
    url.replace(/([^?=&]+)=([^=&]+)/g, (_, $1, $2) => {
        res[$1] = $2
    })
    return res
}

动态修改URL参数

function updateUrlParams(url, params) {
    // 分离URL的各个部分
    const [baseUrl, rest] = url.split('?');
    const [query, hash] = rest.split('#');

    // 解析查询参数
    const queryParams = new URLSearchParams(query);

    // 更新URL参数
    for (let key in params) {
        if (params.hasOwnProperty(key)) {
            const prefixedKey = `_zrpt_${key}`;
            if (queryParams.has(prefixedKey)) {
                queryParams.set(prefixedKey, params[key]);
                console.log(`更新参数: ${prefixedKey} = ${params[key]}`);
            }
        }
    }

    // 重建URL
    const newUrl = `${baseUrl}?${queryParams.toString()}${hash ? `#${hash}` : ''}`;
    console.log("更新后的URL:", newUrl);
    return newUrl;
}

// 示例使用
const paramsToUpdate = {
    "xmgl_xjxm_xmbh22": "2023KF003",
    "xmgl_xjxm_id": "ff8080818fc23e91018fdccb77d04c3a",
    "projectId": "ff8080818fc23e91018fdccb77d04c3a",
    "xmgl_xjxm_name": "xxx"
};

const originalUrl = "http://example.com/zlinkw/#/zreport/portal/viewer?reportCode=xmgl_mh_xmxq&_zrpt_xmgl_xjxm_id=%E6%B0%B8%E5%BA%B7%E4%BC%81%E4%B8%9A%E7%BB%BC%E5%90%88%E6%9C%8D%E5%8A%A1%E5%B9%B3%E5%8F%B0&_zrpt_xmgl_xjxm_xmbh22=2024KF281&_zrpt_projectId=ff80808190911a9c0190a5cbec370c61&_zrpt_xmgl_xjxm_name=%E6%B0%B8%E5%BA%B7%E4%BC%81%E4%B8%9A%E7%BB%BC%E5%90%88%E6%9C%8D%E5%8A%A1%E5%B9%B3%E5%8F%B0&token=2d538ef2-d0d9-4d42-8f31-11971699abc7";

console.log("原始URL:", originalUrl);
const updatedUrl = updateUrlParams(originalUrl, paramsToUpdate);
console.log("最终更新后的URL:", updatedUrl);