使用jQuery无法重复替换超链接href内容的技术问询

问题原因 #

第一次页面加载时，你已经把所有包含/replace的a标签href替换成了带val的新链接，此时这些a标签的href里已经没有/replace这个字符串了。点击按钮再次执行替换逻辑时，$('a[href*="/replace"]')找不到任何匹配的元素，自然不会执行替换操作。就算有漏网的，第二次替换也是基于已经修改过的链接，会生成错误的URL。

解决方案 #

核心思路是把每个a标签的原始URL保存起来，每次替换都基于原始URL生成新链接，而不是修改后的href。可以用元素的data属性存储原始链接，再封装一个复用的更新函数。

修改后的完整代码如下：

页面加载时的初始化与第一次替换

$(document).ready(function(){
    // 先把符合条件的a标签的原始URL存入data属性
    $('a[href*="/replace"]').each(function(){ 
        $(this).data('original-href', $(this).attr('href'));
    });
    // 执行第一次链接更新
    updateLinks();
});

// 封装链接更新逻辑，方便重复调用
function updateLinks() {
    // 从localStorage获取val，注意localStorage的API是getItem
    var val = localStorage.getItem('val');
    // 如果val不存在，直接返回，避免无效操作
    if (!val) return;
    
    // 遍历所有保存过原始URL的a标签
    $('a[data-original-href*="/replace"]').each(function(){ 
        // 读取原始URL
        var originalUrl = $(this).data('original-href');
        // 基于原始URL生成新链接
        var newUrl = originalUrl.replace("/replace", "/" + val);
        // 更新href
        $(this).attr('href', newUrl); 
    });
}

按钮点击时的逻辑

$("#button").click(function(){
    // 注意：localStorage没有push方法，要用setItem存储值
    localStorage.setItem('val', val); // 这里的val是你要存储的目标值
    // 调用更新函数，重新替换链接
    updateLinks();
});

关键注意点 #

• 修正了原代码中localstorage.push(val)的错误，localStorage只能通过setItem(key, value)存储键值对，getItem(key)读取值。
• 封装updateLinks函数后，页面加载和按钮点击时都调用同一个逻辑，避免重复代码，也保证替换逻辑的一致性。
• 每次替换都基于原始URL，不管点击多少次按钮，都能正确生成包含最新val的链接，不会出现找不到替换目标的问题。

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