Haz los enlaces externos naranjas
importancia: 3
Haz todos los enlaces externos de color orange alterando su propiedad style.
Un link es externo si:
- Su
hreftiene:// - Pero no comienza con
http://internal.com.
Ejemplo:
<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>
// establecer un estilo para un enlace
let link = document.querySelector('a');
link.style.color = 'orange';
</script>El resultado podría ser:
Primero, necesitamos encontrar todos los enlaces externos.
Hay dos.
El primero es encontrar todos los enlaces usando document.querySelectorAll('a') y luego filtrar lo que necesitamos:
let links = document.querySelectorAll('a');
for (let link of links) {
let href = link.getAttribute('href');
if (!href) continue; // no atributo
if (!href.includes('://')) continue; // no protocolo
if (href.startsWith('http://internal.com')) continue; // interno
link.style.color = 'orange';
}Tenga en cuenta: nosotros usamos link.getAttribute('href'). No link.href, porque necesitamos el valor del HTML.
…Otra forma más simple sería agregar las comprobaciones al selector CSS:
// busque todos los enlaces que tengan: // en href
//pero href no comienza con http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
links.forEach(link => link.style.color = 'orange');