本文介绍如何利用现代浏览器的 URL API（配合 jQuery）在用户输入时实时向 标签的 href 属性中添加或更新 URL 查询参数，避免手动拼接导致的重复参数、编码错误等问题。

本文介绍如何利用现代浏览器的 URL API（配合 jQuery）在用户输入时实时向 `

$('#search').on('input', function() { // 推荐用 'input' 替代 'keyup'，兼容粘贴、剪切等操作
  const $link = $('#link');
  const currentHref = $link[0].href; // 使用原生 DOM 的 href 属性，确保获取绝对 URL（更可靠）

  try {
    const url = new URL(currentHref);
    url.searchParams.set('search-string', $(this).val()); // 自动编码并覆盖同名参数
    $link.attr('href', url.toString()); // 写回 href 属性
  } catch (e) {
    console.warn('无效的 URL 格式:', e.message);
  }
});

✅ 关键优势说明：

• url.searchParams.set() 会自动对值进行 encodeURIComponent()，安全支持中文、空格、符号等；
• 若 search-string 已存在，直接更新其值，避免参数重复；
• new URL() 自动解析协议、路径、查询参数，无需手动判断 ? 或 &；
• 使用 'input' 事件比 'keyup' 更全面，覆盖鼠标粘贴、语音输入、自动填充等场景。

⚠️ 注意事项：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

• URL API 在 IE 中不支持（IE11 及以下需 polyfill），如需兼容旧浏览器，建议引入 url-polyfill；
• 若原始 href 为相对路径（如示例中的 ../customer_record/...），$link[0].href 会返回当前页面上下文下的绝对 URL，这是正确行为；若必须保持相对路径逻辑，需额外解析处理（但通常跳转场景推荐使用绝对 URL 保证可靠性）；
• 对于空值处理，set('key', '') 会生成 key=，如需完全移除参数，应使用 delete('key')。

通过此方案，你不仅能精准控制 URL 参数，还能提升代码健壮性与可维护性，是现代前端开发中处理动态链接的标准实践。