如何使用全局正则替换内容且不破坏JavaScript绑定事件？

直接替换body的HTML会导致所有原有DOM元素被重新创建，绑定的JavaScript事件自然会丢失。正确的做法是只定位到存在问题的链接元素，单独修改它们的href属性，这样不会触动其他DOM元素和已绑定的事件。

方案1：使用jQuery实现 #

// 选中所有href以"http:///"开头的a标签
$('a[href^="http:///"]').each(function() {
  const currentHref = $(this).attr('href');
  // 替换开头的"http:///"为"/"
  $(this).attr('href', currentHref.replace(/^http:\/\/\//, '/'));
});

方案2：原生JavaScript实现（无需jQuery） #

// 筛选出符合条件的链接
document.querySelectorAll('a[href^="http:///"]').forEach(link => {
  // 直接修改href属性，替换目标前缀
  link.href = link.href.replace(/^http:\/\/\//, '/');
});

关键说明 #

• 选择器[href^="http:///"]精准匹配所有以http:///开头的链接，避免无差别修改其他正常链接。
• 只修改单个元素的href属性，不会触发DOM的整体重新渲染，因此原有元素上绑定的事件（如点击、悬停等）完全不受影响。
• 如果你的内容是从Airtable异步加载的，请确保在内容渲染完成后再执行这段代码（比如放在API回调函数的末尾）。

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