js 为 URL 链接添加 / 修改查询字符串
[編輯] [转简体] (简体译文)
|
作者:huidong
| 分類:【編程】HTML/JavaScript
[
37 瀏覽
0 評論
3 贊
3 踩
]
概要
正文
代码是文心一言写的,有少许错误,我已修改。详情如下:
提出要求
请编写一个 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=662. 当前 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 中添加一个问号。