JavaScript | Как получить протокол (схему) из URI на HTML-странице в браузере?

JavaScript | Как получить протокол (схему) из URI на HTML-странице в браузере?

Задача возможна в двух вариантах:

  1. Ты в браузере и работаешь с документом
  2. У тебя есть строка с URI. Используем класс URL
  3. У тебя есть строка с URI. Используем DOM элемент ссылки

 

Ты в браузере и работаешь с документом

В этом случае ты просто вводишь команду:

document.location.protocol
Получение протокола из документа - JavaScript
Получение протокола из документа — JavaScript

 

У тебя есть строка с URI. Используем класс URL

var str = "https://efim360.ru/"

Тогда нужно обратиться к конструктору класса URL и создать новый объект адреса из строки. То есть нужно нашу строку семантически проанализировать («пропарсить»). Создадим новый объект-прототип класса URL и передадим в конструктор в качестве аргумента нашу строку.

new URL(str)

На выходе мы получим объект адреса. И теперь можно обратиться к свойству объекта, которое называется protocol:

new URL(str).protocol
"https:"

 

Результат в консоли:

Получение протокола из строки - JavaScript
Получение протокола из строки — JavaScript

Мы получили версию протокола. Задача выполнена.

Класс URL

Класс URL - JavaScript
Класс URL — JavaScript

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

 

У тебя есть строка с URI. Используем DOM и элемент ссылки

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.host; // => "example.com:3000"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.hash; // => "#hash"
parser.search; // => "?search=test"
parser.origin; // => "http://example.com:3000"

 

 

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

Стандарт URLWHATWGhttps://url.spec.whatwg.org

Стандарт URLWHATWG https://url.spec.whatwg.org/#scheme-state

Стандарт DOM