Русский
Русский
English
Статистика
Реклама

Урл

Перевод Как разобрать URL в JavaScript?

13.07.2020 16:22:43 | Автор: admin


Доброго времени суток, друзья!

Представляю Вашему вниманию перевод заметки How to Parse URL in JavaScript: hostname, pathname, query, hash автора Dmitri Pavlutin.

Унифицированный указатель ресурса или, сокращенно, URL это ссылка на веб-ресурс (веб-страницу, изображение, файл). URL определяет местонахождения ресурса и способ его получения протокол (http, ftp, mailto).

Например, вот URL данной статьи:

https://dmitripavlutin.com/parse-url-javascript

Часто возникает необходимость получить определенные элементы URL. Это может быть название хоста (hostname, dmitripavlutin.com) или путь (pathname, /parse-url-javascript).

Удобным способом получить отдельные компоненты URL является конструктор URL().

В этой статье мы поговорим о структуре и основных компонентах URL.

1. Структура URL


Изображение лучше тысячи слов. На представленном изображении Вы можете видеть основные компоненты URL:



2. Конструктор URL()


Конструктор URL() это функция, позволяющая разбирать (парсить) компоненты URL:

const url = new URL(relativeOrAbsolute [, absoluteBase])

Аргумент relativeOrAbsolute может быть абсолютным или относительным URL. Если первый аргумент относительная ссылка, то второй аргумент, absoluteBase, является обязательным и представляет собой абсолютный URL основу для первого аргумента.

Например, инициализируем URL() с абсолютным URL:

const url = new URL('http://example.com/path/index.html')url.href // 'http://example.com/path/index.html'

Теперь скомбинируем относительный и абсолютный URL:

const url = new URL('/path/index.html', 'http://example.com')url.href // 'http://example.com/path/index.html'

Свойство href экземпляра URL() возвращает переданную URL-строку.

После создания экземпляра URL(), Вы можете получить доступ к компонентам URL. Для справки, вот интерфейс экземпляра URL():

interface URL {  href:     USVString;  protocol: USVString;  username: USVString;  password: USVString;  host:     USVString;  hostname: USVString;  port:     USVString;  pathname: USVString;  search:   USVString;  hash:     USVString;  readonly origin: USVString;  readonly searchParams: URLSearchParams;  toJSON(): USVString;}

Здесь тип USVString означает, что JavaScript должен возвращать строку.

3. Строка запроса (query string)


Свойство url.search позволяет получить строку запроса URL, начинающуюся с префикса ?:

const url = new URL(    'http://example.com/path/index.html?message=hello&who=world')url.search // '?message=hello&who=world'

Если строка запроса отсутствует, url.search возвращает пустую строку (''):

const url1 = new URL('http://example.com/path/index.html')const url2 = new URL('http://example.com/path/index.html?')url1.search // ''url2.search // ''

3.1. Разбор (парсинг) строки запроса

Вместо получения исходной строки запроса, мы можем получать ее параметры.

Легкий способ это сделать предоставляет свойство url.searchParams. Значением данного свойства является экземпляр интерфейса URLSeachParams.

Объект URLSearchParams предоставляет множество методов для работы с параметрами строки запроса (get(param), has(param) и т.д.).

Давайте рассмотрим пример:

const url = new Url(    'http://example.com/path/index.html?message=hello&who=world')url.searchParams.get('message') // 'hello'url.searchParams.get('missing') // null

url.searchParams.get('message') возвращает значение параметра message строки запроса.

Доступ к несуществующему параметру url.searchParams.get('missing') возвращает null.

4. Название хоста (hostname)


Значением свойства url.hostname является название хоста URL:

const url = new URL('http://example.com/path/index.html')url.hostname // 'example.com'

5. Путь (pathname)


Свойство url.pathname содержит путь URL:

const url = new URL('http://example.com/path/index.html?param=value')url.pathname // '/path/index.html'

Если URL не имеет пути, url.pathname возвращает символ /:

const url = new URL('http://example.com/');url.pathname; // '/'

6. Хеш (hash)


Наконец, хеш может быть получен через свойство url.hash:

const url = new URL('http://example.com/path/index.html#bottom')url.hash // '#bottom'

Если хеш отсутствует, url.hash возвращает пустую строку (''):

const url = new URL('http://example.com/path/index.html')url.hash // ''

7. Проверка (валидация) URL


При вызове конструктора new URL() не только создается экземпляр, но также осуществляется проверка переданного URL. Если URL не является валидным, выбрасывается TypeError.

Например, http ://example.com не валидный URL, поскольку после http имеется пробел.

Попробуем использовать этот URL:

try {    const url = new URL('http ://example.com')} catch (error) {    error // TypeError, "Failed to construct URL: Invalid URL"}

Поскольку 'http ://example.com' неправильный URL, как и ожидалось, new URL('http ://example.com') выбрасывает TypeError.

8. Работа с URL


Такие свойства, как search, hostname, pathname, hash доступны для записи.

Например, давайте изменим название хоста существующего URL с red.com на blue.io:

const url = new URL('http://red.com/path/index.html')url.href // 'http://red.com/path/index.html'url.hostname = 'blue.io'url.href // 'http://blue.io/path/index.html'

Свойства origin, searchParams доступны только для чтения.

9. Заключение


Конструктор URL() является очень удобным способом разбора (парсинга) и проверки (валидации) URL в JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase] в качестве первого параметра принимает абсолютный или относительный URL. Если первый параметр является относительным URL, вторым параметром должен быть абсолютный URL основа для первого аргумента.

После создания экземпляра URL(), Вы можете получить доступ к основным компонентам URL:

  • url.search исходная строка запроса
  • url.searchParams экземпляр URLSearchParams для получения параметров строки запроса
  • url.hostname название хоста
  • url.pathname путь
  • url.hash значение хеша
Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru