Удобное руководство по разбору URL-адресов в JavaScript

Вы когда-нибудь хотели понять, как URL работают в JavaScript? Если да, то вы обратились по адресу!

В этой статье мы углубимся в тему анализа URL-адресов в JavaScript и поймем, как получить доступ к определенным данным из URL-адреса string.

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

Мы также расскажем о нескольких важных советах и ​​рекомендациях по работе со строками URL в JavaScript, так что дочитайте до конца!

В конечном счете, в этой статье вы найдете все, что связано с синтаксическим анализом URL-адресов с помощью JavaScript.

Так что расслабьтесь и приготовьтесь освоить основы работы с URL-адресами в JavaScript!

Что такое синтаксический анализ URL и зачем вам это?

При создании веб-приложения важным навыком является понимание анализа URL-адресов. Это процесс разделения веб-страницы. адрес на его части, чтобы взаимодействовать с ним было легче.

Поняв синтаксический анализ URL-адресов, вы сможете в полной мере использовать возможности своего веб-сайта для быстрой и легкой навигации по страницам и информации.

Анализ URL полезен не только для навигации; он также обеспечивает более простой способ изменения веб-сайтов и доступа к данным. С помощью синтаксического анализа URL вы можете передавать переменные и параметры на разные страницы с помощью строки запроса, создавая динамические возможности для пользователей, изменяя то, что отображается на странице, без обновления всей страницы.

Вы также можете получить доступ к базам данных, используя часть пути URL-адреса, чтобы ваше веб-приложение могло извлекать данные из них без необходимости включать их в форму или аналогичное поле ввода.

Наконец, вы можете использовать якоря (фрагменты, начинающиеся с #), чтобы упростить навигацию по веб-сайту.

Обзор методов анализа URL-адресов в JavaScript

Разбиение URL-адреса на составные части является важной частью веб-разработки. Поняв структуру URL, вы сможете легко взаимодействовать с серверными службами и получать данные из удаленных источников.

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

К ним относятся URL, URLSearchParams, URLSearchParamsAPI, location и window.location.

У каждого метода есть свои преимущества и недостатки — давайте рассмотрим каждый из них.

• URL: Собственный объект URL позволяет создавать URL-адреса, управлять ими, запрашивать их части или задавать новые значения для их компонентов. Он также предоставляет некоторые полезные функции, такие как строки кодирования/декодирования, которые содержат конфиденциальную информацию, такую ​​как пароли или другие личные данные.
• URLSearchParams: этот метод создает объект из пар ключ-значение, соответствующих параметрам запроса URL-адреса. Вы можете использовать его для создания различных параметров и установки их значений по мере необходимости.
• URLSearchParamsAPI. Этот API предоставляет доступ к основным функциям объекта URLSearchParams, позволяя вам эффективно манипулировать URL-адресами, например перебирать все элементы в URL без необходимости самостоятельно анализировать их вручную.
• location: свойство возвращает объект, представляющий текущее местоположение, включая имя хоста, путь, компоненты поиска и хеш-функции, что позволяет вам создавать ссылки из вашего приложения без необходимости каждый раз создавать URL-адреса вручную. он вам нужен.
• window.location: аналогично location, это свойство также возвращает объект

Понимание имени хоста в анализе URL-адресов JavaScript

Имя хоста – это доменное имя, которое вы используете для посещения веб-страницы или веб-сайта. Обычно это выглядит так: www.example.com. В некоторых случаях вы также можете использовать IP-адреса, например https://216.58.208.46.

Вы можете получить имя хоста текущей страницы, которую вы посещаете, с помощью метода API location.hostname в JavaScript:

let hostname = window.location.hostname;

Этот метод API возвращает строку с доменным именем (именем хоста) текущей страницы, которую вы посещаете (например, www.example.com).

У метода Hostname API также есть два других полезных метода, которые можно использовать для возврата более конкретной информации о доменном имени, например об используемых протоколах (например, http или https). Это location.protocol и location.port.

Например, если ваше имя хоста — www.example.com, и вы используете HTTPS для доступа к нему, тогда этот код вернет его как таковой:

let protocol = window.location.protocol; // returns "https:"
let port = window.location.port; //returns "" (empty string)

Но если вместо этого вы используете HTTP, HTTPS, то эти два метода вместо этого вернут это:

let protocol = window .location .protocol; // returns "http:"
let port = window .location .port; //returns "80" (default HTTP port number)

Понимание путей в парсинге URL-адресов JavaScript

Теперь, когда мы поняли, что такое имя хоста и строки запроса, давайте рассмотрим четвертую и последнюю часть синтаксического анализа URL: путь в JavaScript.

Имя пути описывает расположение файла или ресурса на веб-сервере. Он начинается с косой черты /, за которой следует имя каталога. Допустим, вы хотите получить доступ к файлу index.html, который находится в папке blog, содержащей фильмы, музыку, литературу и т. д. Путь будет выглядеть примерно так: /blog/films/index.html.

Например, если вы стилизуете свою HTML-страницу с помощью CSS, имя пути позволит вам узнать, где находится ваш файл CSS — в нашем примере это будет что-то вроде /blog/films/css/style.css.

Давайте посмотрим, как получить путь с помощью JavaScript! Все, что вам нужно сделать, это использовать этот фрагмент кода ниже:

let url = new URL('https://example.com/blog/films');
let getpathname = url.pathname; // '/blog/films'

Вы можете попробовать это сами здесь. По умолчанию, если вы не укажете конкретный файл для своих пользователей, index.html будет использоваться в качестве документа по умолчанию на большинстве веб-серверов, как упоминалось ранее.

Понимание того, как строки запросов и хэши работают при анализе URL-адресов JavaScript

Теперь, когда вы лучше понимаете имена хостов, пути и параметры, давайте взглянем на следующие части URL: строку запроса и хэш.

Строки запроса и хэши используются для указания дополнительных частей URL.

Строки запроса очень полезны для передачи контекстной информации о странице на сервер.

Хэш используется для указания определенной части страницы, которая будет отображаться сразу после загрузки.

Чтобы понять, что такое строки запроса и хэши, давайте посмотрим на этот пример:

http://example.com/search?q=javascript#hashtag.< /а>

В этом примере q=javascript представляет поисковый запрос, который мы передаем на наш сервер, а #hashtag представляет якорь, с помощью которого мы можем заставить нашу страницу перейти прямо к этой части. страницы после загрузки.

Доступ к строкам запроса и хэшам можно получить с помощью объекта window.location в JavaScript.

Чтобы получить доступ к строке запроса нашего примерного URL-адреса, нам нужно вызвать window.location.search, который вернет нам ?q=javascript.

Чтобы получить доступ только к значению, нам нужно использовать

синтаксис window.location.search.split('=')[1], который даст нам javascript.

Точно так же для хэшей мы можем использовать window.location.hash, который вернет нам просто #hashtag.

Работа с URL-адресами с использованием синтаксиса деструктурирования ES6

Следующим шагом в понимании того, как анализировать URL-адрес в JavaScript, является изучение синтаксиса деструктурирования ES6. Это немного более продвинутый способ, чем предыдущие методы, которые мы рассмотрели, но и самый удобный.

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

Для этого все, что вам нужно сделать, это заключить URL-адрес в фигурные скобки и использовать знак = для назначения переменных: const { протокол, имя хоста, порт } = новый URL-адрес (url) .

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

Этот метод особенно полезен для назначения свойств внутри объекта или для предоставления аргументов функция.

Пример:

const { protocol, hostname, port } = new URL(url);
const user = {
protocol: protocol,
domain: hostname,
port: port
};

Теперь давайте рассмотрим несколько примеров.

Пример 1. Анализ имени хоста из URL

Чтобы проанализировать имя хоста, используйте свойство hostname экземпляра URLSearchParams. Это вернет часть имени хоста данного URL:

let href = "https://www.example.com:8080/search#fragment?q=hello";
let url = new URLSearchParams(href);
console.log(url.hostname); // Output: www.example.com

В приведенном выше примере мы выходим из системы с именем хоста в нашей консоли и получаем вывод www.example.com.

Вот как мы легко можем узнать, что является частью имени хоста данного URL-адреса, используя JavaScript!

Пример 2. Анализ имени пути из URL

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

let href = "https://www.example.com/path/to/file";
let url = new URLSearchParams(href);
console.log(url.pathname); // Output: /path/to/file

В нашем примере кода мы создаем экземпляр URLSearchParams, а затем используем его свойство pathName, чтобы получить доступ только к сегменту пути из этого конкретного URL-адреса; в данном случае это `/path

Заключение

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

Свойства имени хоста, пути, запроса и хэша позволяют разбивать URL-адреса на составные части, упрощая создание веб-приложений и управление содержимым.

Выполняя шаги, описанные в этом руководстве, вы сможете быстро и легко анализировать URL-адреса, что на один шаг приблизит вас к вашим целям.

:::информация Также опубликовано здесь.

:::