Одной командой
Array.from(document.getElementsByTagName("a")).map(i => {if(i.hash != "" || i.search != ""){return i.origin + i.pathname}else{return i.origin + i.pathname}})
Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте ENTER.
Для тех кто не понял длинную строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция ниже.
Теория вопроса
Читайте стандарт RFC 3986 | URI — Унифицированный идентификатор ресурса: общий синтаксис. Иногда на HTML-страницах можно встретить веб-ссылки (элементы <a>), которые ведут на адреса с URI-запросами и URI-фрагментами. Пример такой ссылки:
Сам элемент <a>:
<a href="/context/detail/id/153443667/?advert=hRG85sjKi9IGCPvlrQrvcM_8hbKsprnqvRYvmFOAU-yBt_SFzask7RYLdd8OqFpLhHnulwh_B29NzPBwYypjXv5d9z2a-z9ZkaID9G_2mc0XBgJvNuC6vLunDYXhT0rJCuvfvgp3-Ct1q4rFZslitew&hs=1#comments--offset-80" class="a1b" data-v-414055a2="">89 отзывов</a>
Его запрос:
?advert=hRG85sjKi9IGCPvlrQrvcM_8hbKsprnqvRYvmFOAU-yBt_SFzask7RYLdd8OqFpLhHnulwh_B29NzPBwYypjXv5d9z2a-z9ZkaID9G_2mc0XBgJvNuC6vLunDYXhT0rJCuvfvgp3-Ct1q4rFZslitew&hs=1
Его фрагмент:
#comments--offset-80
Задача
Наша задача избавиться от запросов и фрагментов. Зачем? Мы хотим получить «чистый» адрес для составления коллекции адресов одного сайта. Мы ориентированы на содержимое страницы в целом, а не на конкретные его части. Нам важно знать оригинальный адрес страницы, а не её возможные модификации с параметрами.
Запросы и фрагменты в веб-ссылках важны для пользователя и его навигации по сайту, но с точки зрения обслуживания проекта они создают лишние «копии» оригинального адреса на контент. То есть на одну и ту же страницу могут вести адреса с разными запросами и фрагментами, а нам это не интересно вовсе.
Очистка адресов — это подготовительный этап перед формированием ссылочного профиля сайта. Простыми словами в будущем мы планируем получить полный список уникальных адресов сайта, чтобы иметь возможность качественного сканирования.
Нам нужен инструмент — алгоритм.
Решение задачи
Получаем все ссылки. Процедура получения хорошо описана в публикации JavaScript | Как получить все ссылки на HTML-странице?.
var a = document.getElementsByTagName("a")
Преобразовываем HTML-коллекцию в Массив.
var b = Array.from(a)
Преобразовываем массив. Если ссылка содержит запрос, то возвращаем её «источник+путь» — ИЛИ — Если ссылка содержит фрагмент, то возвращаем её «источник+путь». Нам всё равно что встретится первым запрос или фрагмент, потому что мы всё равно будем склеивать две независимые строки — «источник+путь».
var c = b.map(i => {if(i.hash != "" || i.search != ""){return i.origin + i.pathname}else{return i.origin + i.pathname}})
От объекта ссылки (<a>) нам нужно знать всего 4 ключа:
- hash (URI-фрагмент)
- search (URI-запрос)
- origin (URI-схема + URI-основание)
- pathname (URI-путь)
В результате мы получаем удобный массив из адресов без запросов и фрагментов:
Можем теперь вывести список на страницу с переносами строк:
document.write(c.join("<br>"))
Ссылки
Читай дополнительную информацию, которая поможет работать с ссылками в JavaScript.
JavaScript | Как получить все ссылки на HTML-странице?
JavaScript | Как узнать количество ссылок на HTML-странице?
JavaScript | Как получить все внутренние ссылки на HTML-странице?
JavaScript | Как получить все внешние ссылки на HTML-странице?
JavaScript | Как получить все ссылки с запросами на HTML-странице?
JavaScript | Как получить все ссылки с фрагментами на HTML-странице?
DOM стандарт — https://efim360.ru/dom/
Читайте перевод полной версии стандарта «объектной модели документа», чтобы ознакомиться со всеми концепциями и интерфейсами.
DOM — Living Standard — https://dom.spec.whatwg.org
Читайте официальную документацию живого стандарта «объектной модели документа», чтобы быть в курсе последних изменений.
https://dom.spec.whatwg.org/#dom-document-getelementsbytagname
JavaScript — Массивы — https://efim360.ru/javascript-massivy-array/
ECMAScript — Living Standard — https://tc39.es/ecma262/#sec-array.prototype.map
