如何随机替换特定 URL 的 HREF？ innerHTML 影响延迟加载

Question

好吧，我的头已经一个多星期了，我受不了了。

我的目标是随机替换任何给定页面上特定 URL 的 HREF。

例如： https://example.com/offer/free-pizza/

我的 URL 的某些版本包含查询字符串参数，即我想忽略的 https://example.com/offer/free-pizza/?sliceapp，这就是为什么我明确使用正则表达式来调用我的特定 URL 的引号行：

str.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g

我正在使用 Google 跟踪代码管理器中的自定义 HTML 标记部署以下代码。不幸的是，这些链接不包含 ID，所以我不能专门调用它们，所以我正在查看 页面正文中包含的所有内容，换句话说， strong>，这是我正在使用的每个页面的正文。一切都与下面的代码完全一样，除了页面上的延迟加载图像没有出现。

<script>
  function myfunction(){
  var str = document.getElementById("main").innerHTML; 
  var res = str.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g, function() {
return ['https://example.com/somewhere-else/', 'https://example.com/offer/free-pizza/'][Math.floor(Math.random() * 2)] 
return Math.floor(Math.random() * (max - min + 1)) + min;
});
  document.getElementById("main").innerHTML = res;
  }
</script>

根据我的故障排除，我知道问题与使用 innerHTML 返回整个 有关。图像和返回的 HTML 显然不适用于那里。所以我开始转而只查看页面上的各个 URL，而不是整个 部分，这样我就可以完全绕过图像问题。

在这一点上，我必须写了几十个变体来尝试实现这一点，但似乎没有任何效果。

var els = document.querySelectorAll("a[href^='https://example.com/offer/']");
for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el = el.replace(/"https:\/\/example\.com\/offer\/free-pizza\/"/g, function() {
return ['https://example.com/somewhere-else/', 'https://example.com/offer/free-pizza/'][Math.floor(Math.random() * 2)] 
return Math.floor(Math.random() * (max - min + 1)) + min;
})};
</script>

我希望比我聪明得多的人能看到我明显的缺陷，并在考虑到上下文和我的目标的情况下指出我如何以更有效的方式编写这篇文章。

谢谢。

Answer 1

替换整个文档的innerHTML 的问题在于，您可能会删除（并替换）已附加事件侦听器的 DOM 节点，这会使它们无效。我猜延迟加载机制就是利用了这一点。

因此，无需替换整个文档的 innerHTML，您可以只遍历锚标记并替换 href 属性：

document
  .querySelectorAll("a[href^='https://example.com/offer/']")
  .forEach(function (el) {
    el.href = el.href.replace(/https\:\/\/example\.com\/offer\//g, replaceFn);
  });

function replaceFn() {
  return [
    'https://example.com/somewhere-else/', 
    'https://example.com/offer/free-pizza/'
  ][Math.floor(Math.random() * 2)];
}