JavaScript | Как получить все внешние ссылки на HTML-странице?

Одной командой

Простая команда

Array.from(document.getElementsByTagName("a")).filter(i => i.hostname != document.domain).map(i => i.href)

Вывод результатов на текущую страницу браузера

document.write(Array.from(document.getElementsByTagName("a")).filter(i => i.hostname != document.domain).map(i => i.href).join("<br>"))

«Замудрёная» команда

((Array.from(document.getElementsByTagName("a"))).map(i => {if (i.hostname != document.domain) {return i.href}})).filter(i => i != undefined)

Вывод результатов на текущую страницу браузера — «Замудрёная» команда

document.write((((Array.from(document.getElementsByTagName("a"))).map(i => {if (i.hostname != document.domain) {return i.href}})).filter(i => i != undefined)).join("<br>"))

Получение всех внешних ссылок на HTML-странице при помощи JavaScript и консоли браузера

Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте ENTER.

Для тех кто не понял длинную строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция ниже.

Теория вопроса

Внутренние ссылки — это ссылки, которые ведут на страницы данного домена (на страницы домена, на котором они вызваны). Если мы получим все ссылки на странице example.org/links, то ссылки вида example.org/app, example.org/about, example.org/chat, example.org/members будут внутренними т. к. они принадлежат одному домену — example.org.

Внешние ссылки — это ссылки, которые ведут на страницы другого домена. Если мы получим все ссылки на странице example.org/links, то ссылки вида elpmaxe.com/app, elpmaxe.com/about, elpmaxe.com/chat, elpmaxe.com/members будут внешними т. к. они принадлежат другому домену — elpmaxe.com.

Практика решения задачи «Замудрёным» способом

С теорией разобрались, теперь практика. Открываем страницу товаров интернет-магазина. Пусть это будут смартфоны Samsung на сайте Ozon:

https://www.ozon.ru/highlight/75949/

Раздел со смартфонами Samsung на сайте интернет-магазина

Получаем коллекцию узлов с ссылками на данной странице. Используем стандарт DOM и его интерфейс Document. В метод getElementsByTagName() передаём «a» т. к. нам нужно отобрать все HTML-элементы <a> на странице.

var a = document.getElementsByTagName("a")

Нам вернулась HTML-коллекция из 238 узлов <a>. Каждый элемент этой коллекции имеет свой уникальный целочисленный индекс. Порядок элементов зависит от порядка появления в разметке. Консоль браузера подсвечивает нам название элемента и его классы.

Преобразуем HTML-коллекцию в массив и посмотрим нужные нам ключи. Мы преобразовываем в массив для того, чтобы иметь возможность проходить по каждому элементу методами массивов.

var b = Array.from(a)

Теперь получим доменное имя документа сбора ссылок, на основании которого будем сравнивать каждый адрес ссылки элемента массива. Мы ищем внешние ссылки, а значит доменное имя текущей страницы не должно совпадать с ключом hostname элемента <a>.

document.domain

Доменное имя документа с которого собрали узлы a - www.ozon.ru — Доменное имя документа с которого собрали узлы a — www.ozon.ru

Проходим по каждому элементу массива и сравниваем ключи hostname с именем домена.

Ключ hostname - JavaScript — Ключ hostname — JavaScript

Если ключи hostname НЕ совпадают с доменным именем, тогда возвращаем результат href в новый массив. В противном случае ничего не делаем и нам вернётся undefined.

var c = b.map(i => {if (i.hostname != document.domain) {return i.href}})

Итоговый массив будет той же самой длины (238 элементов), что и первоначальный. Всё, что не совпадёт с условием (i.hostname != document.domain) будет иметь значение undefined.

undefined вместо внутренней ссылки - JavaScript — undefined вместо внутренней ссылки — JavaScript

В массиве мы видим много элементов с undefined т. к. это внутренние ссылки и по логике продвижения любого сайта их всегда должно быть больше, чем внешних. Теперь нужно очистить массив от элементов со значениями undefined.

Будем использовать метод прототипов Array — filter(). В него нужно передать условие фильтрации, при котором будут возвращены нужные элементы. В нашем случае мы проверяем каждый элемент на undefined. Если проверяемый элемент НЕ равен undefined, тогда возвращаем этот элемент в новый массив (возвращаем внешнюю ссылку).

var d = c.filter(i => i != undefined)

Теперь из 238 ссылок мы получили 28 внешних ссылок:

Значит на проверяемой странице существует ещё 210 внутренних ссылок.

Что делать с этой информацией?

Плюсы

Внешние ссылки — это хорошо. В первую очередь для поисковых систем, которые при помощи внешних ссылок узнают о существовании новых сайтов. Во-вторых внешние ссылки помогают пользователям находить новые сайты и получать дополнительную информацию из разных источников.

Минусы

Но. Не все внешние ссылки могут приводить в «светлое будущее». Владельцы сайтов должны контролировать поведение пользователей и регистрировать внешние ссылки. Нехороший человек может разместить любую ссылку на свой ресурс и уже на нём украсть данные ваших пользователей (например их деньги). Этот нехороший человек может создать сайт, который один в один похож на ваш. При клике на внешнюю ссылку «беззаботный» пользователь сможет сложить товары в корзину и оплатить из заранее. (деньги попадут злоумышленнику). Если вы топовый интернет-магазин, то ваша репутация очень сильно пострадает.

Итог

Ссылки внешние нужны. Но они должны модерироваться и контролироваться живыми людьми. Своевременный алгоритм сбора внешних ссылок поможет вашему сайту жить безопасно.