Сделайте внешние ссылки оранжевыми
важность: 3
Сделайте все внешние ссылки оранжевыми, изменяя их свойство style.
Ссылка является внешней, если:
- Её
hrefсодержит:// - Но не начинается с
http://internal.com.
Пример:
<a name="list">the list</a>
<ul>
<li><a href="/?originalUrl=https%3A%2F%2Flearn.javascript.ru%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%25B4%25D0%25BE%25D0%25B1%25D0%25B0%25D0%25B2%25D0%25BB%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5%2520%25D1%2581%25D1%2582%25D0%25B8%25D0%25BB%25D1%258F%2520%25D0%25B4%25D0%25BB%25D1%258F%2520%25D0%25BE%25D0%25B4%25D0%25BD%25D0%25BE%25D0%25B9%2520%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B8%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%2Flearn.javascript.ru%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');