回到课程

使外来链接变橙色

重要程度: 3

改变所有外来链接的 style 属性,使链接变橙色。

如果一个链接是外来的:

  • 这个 href 包含有 ://
  • 但不是以 http://internal.com 开头。

例如:

<a name="list">the list</a>
<ul>
  <li><a href="http://google.com">http://google.com</a></li>
  <li><a href="/tutorial">/tutorial.html</a></li>
  <li><a href="local/path">local/path</a></li>
  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
  <li><a href="http://internal.com/test">http://internal.com/test</a></li>
</ul>

<script>
  // 简单地为这些链接设置样式
  let link = document.querySelector('a');
  link.style.color = 'orange';
</script>

结果应该是这样的:

打开一个任务沙箱。

首先,我们需要找到所有外部引用。

这里有两种办法。

第一种是使用 document.querySelectorAll('a') 然后过滤出我们需要的那部分:

let links = document.querySelectorAll('a');

for (let link of links) {
  let href = link.getAttribute('href');
  if (!href) continue; // no attribute

  if (!href.includes('://')) continue; // no protocol

  if (href.startsWith('http://internal.com')) continue; // internal

  link.style.color = 'orange';
}

请注意:我们用的是 link.getAttribute('href')。而不是 link.href,因为我们需要的是 HTML 上的值。

……除此之外,有一个更简便的方式是利用 CSS 选择器的伪类选择器:

// 查找所有 href 中包含:// 的链接
// 但 href 不是以 http://internal.com 开头
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

links.forEach(link => link.style.color = 'orange');

使用沙箱打开解决方案。