使用jQuery修改href后如何重置为原始URL避免关键词叠加

问题本质 #

现有逻辑生成新链接时，以上一次操作后已被修改的href值作为拼接基数，且未留存WordPress服务端动态输出的初始URL，导致每次提交关键词都会在上一次拼接后的地址末尾反复追加内容。

核心解决思路 #

无需额外调用服务端接口获取原始URL：

• 在页面首次渲染完成、未发生任何用户交互的阶段，把所有目标链接的初始href值存入元素自定义属性，作为后续所有拼接操作的固定基准
• 每次响应用户提交关键词的操作时，统一从自定义属性中读取未被改动的原始URL做拼接，完全跳过当前已被修改的href值，从根源上切断叠加链路

可落地的代码实现 #

1. 首次加载时存储所有目标链接的原始值

// DOM完全渲染后立即存储原始链接，此时不存在任何前置修改操作
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.launch a').forEach(link => {
        // 自定义属性存储基础URL，后续操作不修改该属性值
        link.dataset.originalUrl = link.href;
    });
});

2. 绑定提交按钮的点击处理逻辑

// 提交按钮点击事件
document.querySelector('#submit-keyword').addEventListener('click', () => {
    const inputKeyword = document.querySelector('#keyword-input').value.trim();
    // 遍历所有目标链接更新地址
    document.querySelectorAll('.launch a').forEach(link => {
        // 从自定义属性读取原始基础URL，不读取当前已修改的href值
        const baseUrl = link.dataset.originalUrl;
        // 根据实际拼接规则生成新地址，用户输入需做URL编码避免格式错误
        const newUrl = `${baseUrl}?custom_keyword=${encodeURIComponent(inputKeyword)}`;
        // 写回新地址到href属性和链接展示文本
        link.href = newUrl;
        link.textContent = newUrl;
    });
});

落地注意事项 #

• 原始值存储必须在所有修改href的操作之前执行，DOMContentLoaded阶段获取的href就是WordPress动态输出的原始地址，无需额外对接服务端取数
• 存储原始URL的自定义属性全程保持只读，不做任何修改
• 用户输入的关键词拼接时必须使用encodeURIComponent转义，避免特殊字符、空格等内容破坏URL格式

内容的提问来源于stack exchange，提问作者Joe Fletcher