JavaScript: получаем URL-адрес и компоненты (протокол, домен, порт, путь, запрос, хэш)

Вступление

В этом уроке мы рассмотрим, как получить URL загруженной HTML-страницы с помощью JavaScript.

Во-первых, взглянем на URL-адрес:

https://www.uproger.com:8080/category/article-title.html?searchterm=Example+title#2

Этот вымышленный URL-адрес содержит несколько компонентов: протокол, домен, порт, путь, запрос и хэш.

Компоненты URL-адресов

Наш URL-адрес состоит из разных сегментов, разделенных определенными специальными символами. Например, /, ? и #. Каждый из этих сегментов является компонентом URL-адреса:

• Протокол – сегмент URL-адреса, который определяет, какой протокол используется для передачи данных. В нашем случае мы используем https://, обозначающий протокол HTTPS.
• Домен – имя хоста URL-адреса, является продолжением URL-адреса – www.uproger.com.
• Порт – указывается после домена, которому предшествует :. В большинстве случаев порт не является общедоступным, поэтому вы редко увидите его в приложениях, но его очень часто можно заметить на этапе разработки.
• Путь – раздел пути URL-адреса, который следует за доменным именем и портом. Он указывает один ресурс на веб-сайте, HTML-странице, изображении или каком-либо другом типе файла или каталога. В нашем примере путь – это сегмент /category/article-title.html, указывающий на файл article-title.html, который лежит на сервере.
• Запрос – строка, которая обычно используется для включения внутреннего поиска на веб-сайте. Раздел запроса ссылается на раздел ?articleTitle=Example+title URL-адреса. Он предоставляет результат ввода поискового запроса на странице article-title.html.
• Хэш – обычно используется для привязки, обычно это заголовок, но может быть и другой тег. В нашем случае – это #2.

В общем, URL-адреса имеют стандартную структуру, где какие-то элементы являются обязательными, а какие-то – нет:

<protocol>//<domain>:<port>/<path>/<query><hash>

Теперь мы можем подробно рассмотреть, как получить доступ к текущему URL-адресу, а также к каждому из его компонентов с помощью JavaScript.

Как получить URL-адрес в JavaScript

В JavaScript объект Location содержит информацию об URL-адресе загруженной в данный момент страницы. Он принадлежит к window, хотя мы можем получить к нему прямой доступ, потому что window иерархически расположено вверху.

Чтобы получить URL-адрес, мы используем объект Location и извлекаем его свойство href:

var url = window.location.href
console.log(url)

Результат:

https://www.uproger.com:8080/category/article-title.html?searchterm=Example+title#

Свойство href содержит полный URL-адрес загруженного в данный момент ресурса. Если вы хотите получить определенные компоненты, а не весь URL-адрес, вы также можете использовать объект Location.

Получаем источник URL

Свойство window.location.origin выводит базовый URL-адрес (протокол + имя хоста + номер порта) URL-адреса:

console.log(window.location.origin)

https://www.uproger.com:8080

Получаем протокол URL

Свойство window.location.protocol выводит протокол URL-адреса:

console.log(window.location.protocol)

https://

Получаем URL-адрес хоста и имя хоста

Свойство window.location.host выводит URL-адрес хоста и имя хоста:

console.log(window.location.host)

www.uproger.com:8080

Свойство window.location.hostname выводит лишь имя хоста:

console.log(window.location.hostname)

www.uproger.com

Получаем URL-адрес порта

Свойство window.location.port выводит номер порта:

console.log(window.location.port)

8080

Получаем URL-адрес

Свойство window.location.pathname выводит раздел пути:

console.log(window.location.pathname)

/category/article-title.html

Получаем URL-запрос и хэш

Свойство window.location.search выводит *раздел запроса*:

console.log(window.location.search)

?searchterm=Example+title

Свойство window.location.hash выводит хэш:

console.log(window.location.hash)

#2

Заключение

Как вы могли понять, у JavaScript есть простой способ доступа к URL-адресу. Объект Location, доступ к которому осуществляется через интерфейс окна, позволяет получить не только URL-адрес, но и каждый его отдельный раздел.

Объект Location также может изменять URL-адрес и перенаправлять вас на новый URL-адрес.