back to the lesson

Make external links orange

importance: 3

First, we need to find all external references.

There are two ways.

The first is to find all links using document.querySelectorAll('a') and then filter out what we need:

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('')) continue; // internal = 'orange';

Please note: we use link.getAttribute('href'). Not link.href, because we need the value from HTML.

…Another, simpler way would be to add the checks to CSS selector:

// look for all links that have :// in href
// but href doesn't start with
let selector = 'a[href*="://"]:not([href^=""])';
let links = document.querySelectorAll(selector);

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

Open the solution in a sandbox.

Make all external links orange by altering their style property.

A link is external if:

  • It’s href has :// in it
  • But doesn’t start with


<a name="list">the list</a>
  <li><a href=""></a></li>
  <li><a href="/tutorial">/tutorial.html</a></li>
  <li><a href="local/path">local/path</a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>

  // setting style for a single link
  let link = document.querySelector('a'); = 'orange';

The result should be:

Open a sandbox for the task.