Question

这是我当前的代码：

window.onload = function() {
    document.querySelectorAll('a').forEach((anchor) => {
        const href = anchor.getAttribute('href');
        /:\/\//.test(href) && anchor.setAttribute('href', 'http://example.com/go=' + href);
        console.log(anchor.getAttribute('href'));
    });
}

该代码应该在所有外部链接之前添加http://example.com/go=。

如果我链接到外部页面，则表明它已正确添加。但是，它还会根据我链接到内部页面的方式将其添加到内部页面。如果我像<a href="/testing">那样链接到它们，则不会添加（正确。

但是，如果我像<a href="http://website.com/testing">那样链接到我的网站，则假定这是一个外部URL，因为我包括了域并在该域之前添加了字符串。

我在做什么错了？

Answer 1

您可以用一个测试正则表达式替换一个正则表达式，该正则表达式还可以检查href域是否不与website.com存在：更改

/:\/\//

到

/:\/\/(?!website\.com)/

您也可以考虑使用if语句而不是&&，以使代码更具可读性（将看上去比较复杂的&&-as-if留给缩小器）：

document.querySelectorAll('a').forEach((anchor) => {
  const href = anchor.getAttribute('href');
  if (/:\/\/(?!website\.com)/.test(href)) {
    anchor.setAttribute('href', 'http://example.com/go=' + href);
  }
  console.log(anchor.getAttribute('href'));
});

还请注意，querySelectorAll返回NodeList，而不是数组，并且只有 new 浏览器支持NodeList.prototype.forEach-Vista和较旧系统上的Chrome用户将运行例如，如果出现错误，那么如果您要支持它们，请确保包含一个polyfill（如果尚未添加）。

如果需要，可以通过选中window.location.hostname从当前域动态创建正则表达式：

document.querySelectorAll('a').forEach((anchor) => {
  const { hostname } = window.location;
  const escapedHostname = hostname.replace(/\./g, '\\.');
  const pattern = new RegExp(`://(?!${escapedHostname})`);
  const href = anchor.getAttribute('href');
  if (pattern.test(href)) {
    anchor.setAttribute('href', 'http://example.com/go=' + href);
  }
  console.log(anchor.getAttribute('href'));
});

使用javascript编辑外部链接

1 个答案: