匯東網


js 为 URL 链接添加 / 修改查询字符串

[編輯] [转简体]
|
作者:huidong | 分類:【編程】HTML/JavaScript
[ 26 瀏覽 0 評論 2 贊 0 踩 ]

【概要】

【正文】

代码是文心一言写的,有少许错误,我已修改。详情如下:

提出要求

请编写一个 js 函数 addURLQueryParam(paramName, paramValue),实现在当前 URL 链接的基础上进行改动从而获得新的 URL 链接字符串,要求:
1. 传入的 paramName 和 paramValue 代表需要添加的 URL 参数,该参数如果已经在 URL 中存在,则对其进行覆盖
2. 原有 URL 链接中可能含有若干个 URL 参数
3. 函数返回新的 URL 链接

示例:
1. 当前 URL:index.htm?a=123&c=32&b=66
调用 addURLQueryParam("c", "9")
返回 index.htm?a=123&c=9&b=66

2. 当前 URL:index.htm?a=123&b=aosdfasdf
调用 addURLQueryParam("p", "312")
返回 index.htm?a=123&b=aosdfasdf&p=312

给出代码

// 为指定 URL 添加 URL 查询参数(若已存在则修改)
//
// paramName: URL 参数名
// paramValue: URL 参数值
// baseUrl: 要操作的 URL 链接,为空则自动填入当前页面 URL
//
// 返回修改后的 URL 链接字符串
function addURLQueryParam(paramName, paramValue, baseUrl) {
    // 如果未传入 baseUrl,则使用当前页面的 URL
    if (!baseUrl) {
        baseUrl = window.location.href;
    }

    // 根据 "?" 分隔基本 URL 和参数字符串
    var baseParts = baseUrl.split('?');
    var queryString = baseParts[1] || '';
    var params = {};

    // 将现有的查询字符串解析为参数对象
    queryString.split('&').forEach(function (param) {
        var parts = param.split('=');
        if (parts.length === 2) {
            params[parts[0]] = parts[1];
        }
    });

    // 添加或覆盖新的参数
    params[paramName] = paramValue;

    // 构造新的查询字符串
    var newQueryString = Object.keys(params)
        .map(key => key + '=' + params[key])
        .join('&');

    // 如果基本URL中没有查询字符串,确保添加 '?'
    return baseParts[0] + (newQueryString ? '?' + newQueryString : '');
}

// 使用示例
var url1 = "index.htm?a=123&c=32&b=66";
console.log(addURLQueryParam("c", "9", url1)); // 输出: index.htm?a=123&c=9&b=66

var url2 = "index.htm?a=123&b=aosdfasdf";
console.log(addURLQueryParam("p", "312", url2)); // 输出: index.htm?a=123&b=aosdfasdf&p=312

// 如果不传入baseUrl,则使用当前页面的url
var currentUrl = window.location.href;
console.log(addURLQueryParam("testParam", "testValue")); // 输出: 当前页面的url + '?testParam=testValue' 或包含其他现有参数的完整url

这个 addURLQueryParam 函数首先检查是否提供了 baseUrl 参数,如果没有,则默认使用当前页面的 URL。然后,它解析现有的查询字符串并将其转换为一个参数对象。之后,它将新的参数添加到这个对象中,如果参数已经存在,则覆盖其值。最后,它将参数对象转换回查询字符串的格式,并将其附加到基本 URL 上。如果基本 URL 中没有查询字符串,它会在返回的新 URL 中添加一个问号。

[ 2] [ 0]


【評論區】 0 條評論

昵稱: 必填
聯系方式: 公開,填「無」亦可
驗證碼: 驗證碼