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

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

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

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

Альтернативный способ — «замудрёный»

((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-странице при помощи 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.

 

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

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

https://www.mvideo.ru/tovary-dlya-britya-i-strizhki-5927/elektrobritvy-137
Страница интернет-магазина с электробритвами
Страница интернет-магазина с электробритвами

Получаем коллекцию узлов с ссылками на данной странице:

var a = document.getElementsByTagName("a")

Нам вернулась HTML-коллекция из 150 узлов <a>

HTML коллекция из 150 узлов a
HTML коллекция из 150 узлов a

 

Преобразуем HTML-коллекцию в массив и посмотрим нужные нам ключи

var b = Array.from(a)
Массив из 150 узлов a
Массив из 150 узлов a

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

var docdom = document.domain
Доменное имя документа с которого собрали узлы a
Доменное имя документа с которого собрали узлы a

Проходим по каждому элементу массива и сравниваем ключи hostname с именем домена. Если ключи hostname совпадают с доменным именем, тогда возвращаем результат href в новый массив.

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

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

undefined вместо внешней ссылки
undefined вместо внешней ссылки

Теперь нужно очистить массив от элементов со значениями undefined.

 

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

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

Теперь из 150 ссылок мы получили 127 внутренних ссылок:

Все внутренние ссылки из документа
Все внутренние ссылки из документа

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

 

Ссылки

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

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

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

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

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

JavaScript | Массивы (Array)

JavaScript | Объявление массива через квадратные скобки []

ECMAScriptLiving Standardhttps://tc39.es/ecma262/#sec-array-objects

ECMAScriptLiving Standardhttps://tc39.es/ecma262/#sec-array.from

Свойства конструктора Array

Свойства объекта прототипа Array