Make external links orange

Tashqi havolalarni to’q sariq rangga aylantiring

Uslub xususiyatini oʻzgartirib, barcha tashqi havolalarni toʻq sariq rangga aylantiring.

Havola tashqi hisoblanadi, agar:

Uning hrefida :// mavjud
Lekin http://internal.com bilan boshlanmaydi.

Example:

<a name="list">Ro'yxat:</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>
  // bitta havola uchun uslubni sozlash
  let link = document.querySelector("a");
  link.style.color = "orange";
</script>

The result should be:

Vazifa uchun sandbox-ni oching.

Birinchidan, biz barcha tashqi havolalarni topishimiz kerak.

Buning ikkita yo’l bor.

Birinchisi, document.querySelectorAll('a') yordamida barcha havolalarni topish va keyin bizga kerak bo’lgan narsalarni filtrlash:

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

for (let link of links) {
  let href = link.getAttribute('href');
  if (!href) continue; // attributsiz

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

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

  link.style.color = 'orange';
}
        

Esda tuting: biz link.getAttribute('href') dan foydalanamiz. link.href emas, chunki bizga HTML qiymati kerak.

Yana bir oddiy usul CSS selektoriga chek qo’shishdir:

          // href da :// bo'lgan barcha havolalarni qidiring
// lekin href http://internal.com bilan boshlanmaydi
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

links.forEach((link) => (link.style.color = "orange"));
        

Yechimni sandbox-da oching.