Зробіть зовнішні посилання помаранчевими
важливість: 3
Зробіть всі зовнішні посилання помаранчевими, змінюючи властивість style.
Посилання є зовнішнім, якщо:
- В його
hrefє:// - Але не починається з
http://internal.com.
Приклад:
<a name="list">список</a>
<ul>
<li><a href="/?originalUrl=https%3A%2F%2Fuk.javascript.info%2F%26quot%3Bhttp%3A%2F%2Fgoogle.com%26quot%3B%26gt%3Bhttp%3A%2F%2Fgoogle.com%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3B%2Ftutorial%26quot%3B%26gt%3B%2Ftutorial.html%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3Blocal%2Fpath%26quot%3B%26gt%3Blocal%2Fpath%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3Bftp%3A%2F%2Fftp.com%2Fmy.zip%26quot%3B%26gt%3Bftp%3A%2F%2Fftp.com%2Fmy.zip%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3Bhttp%3A%2F%2Fnodejs.org%26quot%3B%26gt%3Bhttp%3A%2F%2Fnodejs.org%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%2520%2520%26lt%3Bli%26gt%3B%26lt%3Ba%2520href%3D%26quot%3Bhttp%3A%2F%2Finternal.com%2Ftest%26quot%3B%26gt%3Bhttp%3A%2F%2Finternal.com%2Ftest%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fli%26gt%3B%26lt%3B%2Ful%26gt%3B%26lt%3Bscript%26gt%3B%2520%2520%2F%2F%2520%25D0%25BD%25D0%25B0%25D0%25BB%25D0%25B0%25D1%2588%25D1%2582%25D1%2583%25D0%25B2%25D0%25B0%25D0%25BD%25D0%25BD%25D1%258F%2520style%2520%25D0%25B4%25D0%25BB%25D1%258F%2520%25D0%25BE%25D0%25B4%25D0%25BD%25D0%25BE%25D0%25B3%25D0%25BE%2520%25D0%25BF%25D0%25BE%25D1%2581%25D0%25B8%25D0%25BB%25D0%25B0%25D0%25BD%25D0%25BD%25D1%258F%2520%2520let%2520link%2520%3D%2520document.querySelector("a');
link.style.color = 'orange';
</script>Результат повинен бути:
По-перше, нам потрібно знайти всі зовнішні посилання.
Є два способи.
Перше – знайти всі посилання, використовуючи document.querySelectorAll('a'), а потім відфільтровувати те, що нам потрібно:
let links = document.querySelectorAll('a');
for (let link of links) {
let href="/?originalUrl=https%3A%2F%2Fuk.javascript.info%2Flink.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');