Make external links orange
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('http://internal.com')) continue; // internal
link.style.color = '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 http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
links.forEach(link => link.style.color = 'orange');