JavaScript修改URL的searchParams无效问题排查

希望通过脚本将URL从example.com/?gclid=456动态修改为example.com/?gclid=456&client_id=123，但以下脚本未生效，已知Cookie值gaClientId已正常填充，请求排查错误：

function () {
  var links = document.querySelectorAll('a[href*=example]');
  links.forEach(function(link) {            
    var original = new URL(link.getAttribute('href'));
    var search_params = original.searchParams;  
    search_params.set('client_id', {{Read gaClientId}});
    link.href=original;            
  })
}

• URL构造不兼容：new URL()要求传入完整URL（需包含http://或https://协议头），如果原链接是相对路径（比如/?gclid=456）或仅域名开头的格式，会直接导致URL对象创建失败，后续逻辑无法执行。
• 模板语法未解析：{{Read gaClientId}}属于模板语法，若脚本运行时该语法未被提前替换为实际Cookie值，会被当作未定义变量，最终client_id会被设为undefined。
• href赋值不严谨：直接将URL对象赋值给link.href虽浏览器会自动转换，但明确使用original.toString()获取字符串格式URL更稳妥，避免潜在类型兼容问题。

修复后的脚本示例：

function modifyExampleLinks() {
  var links = document.querySelectorAll('a[href*="example"]');
  links.forEach(function(link) {
    var href = link.getAttribute('href');
    var originalUrl;
    // 兼容相对路径、无协议的URL格式
    try {
      originalUrl = new URL(href);
    } catch (e) {
      originalUrl = new URL(href, window.location.origin);
    }
    
    var searchParams = originalUrl.searchParams;
    // 直接读取Cookie中的gaClientId值
    var gaClientId = document.cookie.split('; ').find(row => row.startsWith('gaClientId='))?.split('=')[1];
    if (gaClientId) {
      searchParams.set('client_id', gaClientId);
      link.href = originalUrl.toString();
    }
  });
}

// 确保DOM完全加载后执行脚本
document.addEventListener('DOMContentLoaded', modifyExampleLinks);

• 额外注意：若页面存在动态加载的链接，需在动态内容渲染完成后重新调用该函数，否则新增链接不会被处理。

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