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

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

Задача

Мы хотим получить список внутренних страниц сайта на которые ссылается текущая страница сайта, но без URI-запросов и без URI-фрагментов (смотри стандарт URI — RFC 3986). То есть мы отрыли какую-нибудь страницу в браузере и хотим понять куда мы можем перейти из неё, в пределах одного домена.

У нас есть глобальная задача получения списка всех страниц сайта. Один из способов решения этого вопроса — это сканирование внутренних ссылок для построения всего ссылочного профиля сайта.

 

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

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

Получаем все ссылки. Фильтруем внутренние.

По итогу у нас могут появиться ссылки вида:

  • ‘http://a.ru/q?sdsds
  • ‘http://a.ru/q?ewfcwe2fw3
  • ‘http://a.ru/q?626h366ch3h3kv83j-3k3jf73

Для большинства нормальных сайтов контент на этих трёх адресах будет одинаковым. То есть в большинстве случаев СЕРВЕР будет отдавать на КЛИЕНТ одинаковый основной контент.

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

В итоге мы получим

  • ‘http://a.ru/q’
  • ‘http://a.ru/q’
  • ‘http://a.ru/q’

Эти три адреса мы можем «схлопнуть» в один при помощи НАБОРОВ в JavaScript.

 

Есть два пути решения данной задачи:

  1. Создаём объекты — экземпляры класса URL
  2. Очищаем URI-запросы регулярным выражением

 

Решение № 1 — Создание экземпляра класса URL

Представим, что у нас есть массив из адресов:

let arr = [
   'http://a.ru/q?sdsds',
   'http://a.ru/q?ewfcwe2fw3',
   'http://a.ru/q?626h366ch3h3kv83j-3k3jf73',
]
Массив из 3 URL-адресов с URI-запросами - JavaScript
Массив из 3 URL-адресов с URI-запросами — JavaScript

Преобразовываем строки в объекты URL:

arr.map(item=>new URL(item))

Извлекаем конкатенацию значения ключей origin и pathname:

arr.map(item=>(new URL(item).origin+new URL(item).pathname))

Создаём новый набор:

new Set(arr.map(item=>(new URL(item).origin+new URL(item).pathname)))

Извлекаем из набора уникальные элементы в виде массива:

[...new Set(arr.map(item=>(new URL(item).origin+new URL(item).pathname)))]

На выходе у нас будет массив из уникальных URL-адресов с отброшенными URI-запросами

Очистка URL-адресов от URI-запросов и их уникализация - JavaScritpt
Очистка URL-адресов от URI-запросов и их уникализация — JavaScritpt

 

Решение № 2 — Очистка URL-адреса регулярным выражением

Замена будет производиться методом replace():

.replace(/\?.*/g, '')

И применение этого в массиве:

arr.map(item=>item.replace(/\?.*/g, ''))

Создаём новый набор:

new Set(arr.map(item=>item.replace(/\?.*/g, '')))

Извлекаем из набора уникальные элементы в виде массива:

[...new Set(arr.map(item=>item.replace(/\?.*/g, '')))]

На выходе у нас будет массив из уникальных URL-адресов с отброшенными URI-запросами

Очистка URL-адресов от URI-запросов и их уникализация через RegExp - JavaScritpt
Очистка URL-адресов от URI-запросов и их уникализация через RegExp — JavaScritpt

 

Информационные ссылки

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

Стандарт ECMAScripthttps://tc39.es/ecma262/multipage/

Стандарт ECMAScript — Наборы — https://tc39.es/ecma262/multipage/keyed-collections.html#sec-set-objects

Стандарт ECMAScript — Регулярные выражения — https://tc39.es/ecma262/multipage/text-processing.html#sec-regexp-regular-expression-objects