如何使用jQuery随用户输入为链接href动态添加参数？

云原生阿岚

2026-7-10

问题分析与解决

你的代码核心问题是每次键盘输入时都会读取当前已修改的href，重复追加search-string参数，最终链接会变成../customer_record/?id=1&customer_id=2&search-string=a&search-string=ab&search-string=abc这种错误格式。

正确的做法是先保存原始链接地址，每次输入都基于原始地址重新构建带参数的href，同时处理输入为空的情况：

// 提前保存原始href，避免重复叠加参数
const originalHref = $('#link').attr('href');

$('#search').on('keyup', function(){
    const searchVal = $(this).val().trim();
    let newHref = originalHref;
    
    if (searchVal) {
        // 编码搜索值，防止特殊字符破坏URL结构
        const searchParam = '&search-string=' + encodeURIComponent(searchVal);
        // 移除已存在的search-string参数，避免重复
        newHref = newHref.replace(/(&|\?)search-string=[^&]*/, '') + searchParam;
        // 处理原始链接无参数的情况，把&替换成?
        if (!newHref.includes('?')) {
            newHref = newHref.replace('&', '?');
        }
    } else {
        // 输入为空时，移除search-string参数
        newHref = newHref.replace(/(&|\?)search-string=[^&]*/, '');
        // 清理末尾残留的&或?
        newHref = newHref.replace(/[&?]$/, '');
    }
    
    $('#link').attr('href', newHref);
});