Получить hostname из ссылки

Появилась задача всем ссылкам на странице ведущим на внешние сайты добавить атрибуты target="_blank" и rel="noopener noreferrer" через JavaScript, а для этого нужно програмно проверить что ссылка ведёт на внешний сайт, то есть нужно извлечь из неё hostname.

Допустим у нас в HTML есть вот такая ссылка:

<a href="https://example.com/path/test">Ссылка</a>

Нам нужно из этой ссылки получить её hostname, то есть чтобы было example.com.

Как это сделать?

Всё просто. Показываю пошагово.

Сначала получаем ссылку в переменную:

let link = document.querySelector('a'); // <a href="https://example.com/path/test">Ссылка</a>

Затем получаем значение атрибута href

let hrefLink = link.href; // https://example.com/path/test

Теперь при помощи глобального конструктора URL() создаём URL-объект. Конструктор принимает параметром строку, являющейся ссылкой из которой будем делать объект. То есть нам нужно из строки https://example.com/path/test сделать URL-объект. В нашем случае передаём в конструктор переменную, в которой хранится урл-адрес:

let objURL = new URL(hrefLink); // {origin: 'https://example.com', protocol: 'https:', host: 'example.com', hostname: "example.com"…}

И теперь из объекта objURL можем получить свойство hostname, так же как из адресной строки браузера:

let hostnameLink = objURL.hostname; // example.com

В итоге мы получили hostname из ссылки.

Решение

Всё то же самое можно записать коротким вариантом:

let hostnameLink = new URL(document.querySelector('a').href).hostname;

Пример использования

Ну и как пример, давайте всем ссылкам на странице которые ведут на внешние сайты добавим атрибут target="_blank" (чтобы они открывались в новой вкладке браузера) и атрибут rel="noopener noreferrer" (чтобы не передавался источник перехода).

То есть из вот такой ссылки:

<a href="https://example.com">Ссылка</a>

должно получиться вот так:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Ссылка</a>

Получается вот такой скрипт который можно подправить под свои нужды:

document.querySelectorAll('a').forEach(link => {
    if (window.location.hostname != new URL(link.href).hostname) {
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener noreferrer');
    }
});