Obarvěte externí odkazy oranžově

Obarvěte všechny externí odkazy oranžově změnou jejich vlastnosti style.

Odkaz je externí, jestliže:

Jeho href obsahuje ://.
Ale nezačíná http://internal.com.

Příklad:

<a name="seznam">seznam</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>
  // nastavíme styl pro jediný odkaz
  let odkaz = document.querySelector('a');
  odkaz.style.color = 'orange';
</script>

Výsledek by měl být:

Otevřít pískoviště pro úlohu.

Nejprve musíme najít všechny externí odkazy.

To lze udělat dvěma způsoby.

První je najít všechny odkazy pomocí document.querySelectorAll('a') a pak vyfiltrovat ty, které potřebujeme:

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

for (let odkaz of odkazy) {
  let href = odkaz.getAttribute('href');
  if (!href) continue; // neobsahuje atribut

  if (!href.includes('://')) continue; // neobsahuje protokol

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

  odkaz.style.color = 'orange';
}
        

Prosíme všimněte si, že používáme odkaz.getAttribute('href') a ne odkaz.href, protože potřebujeme hodnotu z HTML kódu.

…Druhý, jednodušší způsob je přidat kontrolu do CSS selektoru:

          // najdeme všechny odkazy, které v href obsahují ://
// ale href nezačíná http://internal.com
let selektor = 'a[href*="://"]:not([href^="http://internal.com"])';
let odkaz = document.querySelectorAll(selektor);

odkazy.forEach(odkaz => odkaz.style.color = 'orange');
        

Otevřít řešení na pískovišti.