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

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

document.write((((Array.from(document.getElementsByTagName("a"))).map(i => {if (i.search != "") {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.

Запрос — это часть URL, которая начинается со знака вопроса и продолжается до конца. В запросах передаются параметры на сервер. Параметры разделяются амперсандом (значком &).

Что мы ищем?

Ссылка с URI-запрсом - JavaScript
Ссылка с URI-запрсом — JavaScript

Мы ищем подобные ссылки с URI-запросами.

"https://www.ozon.ru/brand/philips-22706003/category/bytovaya-tehnika-10500/?fast_delivery=t&is_supermarket=f&isdiscount=t&ismarkeddown=f&sorting=discount"

В них нас интересует запись вида:

?fast_delivery=t&is_supermarket=f&isdiscount=t&ismarkeddown=f&sorting=discount

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

 

Что конкретно нас интересует?

URI-запрос внутренней ссылки понятен. Это логика работы самого сайта (нашего сайта), о которой мы можем знать всю информацию.

Но URI-запрос внешней ссылки (GET-запрос) может передавать открытую информацию о пользователях или другую тайную информацию злоумышленнику на сторонний сайт. Иногда нужно проверять какие данные уходят в URI-запросах, а главное куда.

 

Практика решения задачи

Получаем все ссылки с HTML-страницы

Получаем все возможные веб-ссылки — как внутренние, так и внешние; хоть с запросом, хоть с фрагментом. Тупо все из разметки.

var a = document.getElementsByTagName("a")

 

Находим ключ, по которому определяется URI-запрос

В нашем случае нас интересует ключ search. Он содержит информацию о запросе URI.

Ключ search для отбора ссылок с запросами - JavaScript
Ключ search для отбора ссылок с запросами — JavaScript

 

Переводим коллекцию в массив

var b = Array.from(a)

Задаём условие для отбора

var c = b.map(i => {if (i.search != "") {return i.href}})

По умолчанию, если запрос отсутствует, то значение по ключу search равно «». Поэтому в условии мы утверждаем (Если не равно пустоте — «»)

Массив с ссылками с URI-запросами - JavaScript
Массив с ссылками с URI-запросами — JavaScript

 

Проводим чистку массива

var d = c.filter(i => i != undefined)
Итоговый список ссылок с URI-запросами - JavaScript
Итоговый список ссылок с URI-запросами — JavaScript

Теперь мы понимаем с какими ссылками и запросами имеем дело.

Ссылки

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

Поделись записью