Rendre les liens externes orange
importance: 3
Mettez tous les liens externes en orange en modifiant leur propriété style.
Un lien est externe si :
- Son
hrefcontient:// - Mais ne commence pas par
http://internal.com.
Exemple :
<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>
// setting style for a single link
let link = document.querySelector('a');
link.style.color = 'orange';
</script>Le résultat devrait être :
Tout d’abord, nous devons trouver toutes les références externes.
Il y a deux façons.
La première consiste à trouver tous les liens à l’aide de document.querySelectorAll('a') puis à filtrer ce dont nous avons besoin :
let links = document.querySelectorAll('a');
for (let link of links) {
let href = link.getAttribute('href');
if (!href) continue; // pas d'attribut
if (!href.includes('://')) continue; // pas de protocol
if (href.startsWith('http://internal.com')) continue; // interne
link.style.color = 'orange';
}Veuillez noter: nous utilisons link.getAttribute('href'). Pas link.href, car nous avons besoin de la valeur HTML.
… Un autre moyen plus simple serait d’ajouter les contrôles au sélecteur CSS :
// recherchez tous les liens qui ont :// dans href
// mais href ne commence pas par http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
links.forEach(link => link.style.color = 'orange');