назад до уроку

Зробіть зовнішні посилання помаранчевими

важливість: 3

Зробіть всі зовнішні посилання помаранчевими, змінюючи властивість style.

Посилання є зовнішнім, якщо:

  • В його href є ://
  • Але не починається з http://internal.com.

Приклад:

<a name="list">список</a>
<ul>
  <li><a href=/proxy/https/uk.javascript.info/task/&quot;http://google.com&quot;&gt;http://google.com&lt;/a&gt;&lt;/li&gt;
  <li><a href=/proxy/https/uk.javascript.info/task/&quot;/tutorial&quot;&gt;/tutorial.html&lt;/a&gt;&lt;/li&gt;
  <li><a href=/proxy/https/uk.javascript.info/task/&quot;local/path&quot;&gt;local/path&lt;/a&gt;&lt;/li&gt;
  <li><a href=/proxy/https/uk.javascript.info/task/&quot;ftp://ftp.com/my.zip&quot;&gt;ftp://ftp.com/my.zip&lt;/a&gt;&lt;/li&gt;
  <li><a href=/proxy/https/uk.javascript.info/task/&quot;http://nodejs.org&quot;&gt;http://nodejs.org&lt;/a&gt;&lt;/li&gt;
  <li><a href=/proxy/https/uk.javascript.info/task/&quot;http://internal.com/test&quot;&gt;http://internal.com/test&lt;/a&gt;&lt;/li&gt;
</ul>

<script>
  // налаштування style для одного посилання
  let link = document.querySelector('a');
  link.style.color = 'orange';
</script>

Результат повинен бути:

Відкрити пісочницю для завдання.

По-перше, нам потрібно знайти всі зовнішні посилання.

Є два способи.

Перше – знайти всі посилання, використовуючи document.querySelectorAll('a'), а потім відфільтровувати те, що нам потрібно:

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

for (let link of links) {
  let href = link.getAttribute('href');
  if (!href) continue; // немає атрибуту

  if (!href.includes('://')) continue; // немає протоколу

  if (href.startsWith('http://internal.com')) continue; // внутрішня

  link.style.color = 'orange';
}

Будь ласка, зверніть увагу: ми використовуємо link.getAttribute('href'). Не link.href тому, що нам потрібна властивість з HTML.

…Інший, простий спосіб полягає в тому, щоб додати перевірки до селектора CSS:

// шукати всі посилання, які мають :// у href
// але href не починається з http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

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

Відкрити рішення в пісочниці.