Здорово! В этом коротеньком посте вы узнаете еще один способ работы с адресными строками через javascript.

Ранее я уже выкладывал пост

"РАБОТА С URL В JAVASCRIPT"

там рассматривалось как работать с текущим url адресом через объект window.location и document.

Сегодня мы рассмотрим еще один способ обработки url строк через объект URL. Данный объект может обрабатывать любую url строку которую вы ему скормите, в отличии от объектов window.location и document которые работают только со строкой которая указана в адресе браузера. Приступаем к рассмотрению!

Объект URL хорошо поддерживается всеми современными браузерами. Для того чтобы начать с ним работать его необходимо создать.

var url = new URL("https://webfanat.com:9090/article_id/?id=189#flag");

Делается это через класс URL() в который передается сама url строка которую мы хотим обработать. На выходе получается готовый объект url.

Теперь просто обращаясь к свойствам объекта мы можем получать различную информацию из переданной строки.

var url = new URL("https://webfanat.com:9090/article_id/?id=189#flag"); 
console.log(url.href);
console.log(url.protocol);
console.log(url.origin);
console.log(url.host);
console.log(url.port);
console.log(url.pathname);
console.log(url.search);
console.log(url.hash);

url.href - полный url адрес

url.protocol - протокол

url.origin - протокол, домен и порт

url.host - домен и порт

url.port - порт

url.pathname - название страницы

url.search - строка параметров

url.hash - строка хеш

Все свойства можно посмотреть:

console.log(url);

Обращаясь к объекту url.

Для того чтобы получить значение определенного параметра можно воспользоваться методом get():

console.log(url.searchParams.get("id"));

Сам метод принимает название параметра, значение которого вы хотите получить.

Помимо получения значений свойств мы можем их изменять.

var url = new URL("https://webfanat.com:9090/article_id/?id=189#flag");
    url.protocol = "http";
	url.hash = "";
    console.log(url.href);

Например здесь мы у url изменили протокол на http и убрал хеш строку. Также можно изменять параметры через метод set:

url.searchParams.set("id", 90);

Изначально наш параметр id равнялся 189, после выполнения этого метода он станет 90. Сам set() принимает два аргумента: название парметра и новое значение.

В итоге после выполнения такого кода.

var url = new URL("https://webfanat.com:9090/article_id/?id=189#flag");
  url.protocol = "http";
  url.hash = "";
  url.searchParams.set("id",90)
  console.log(url.href);

Из строки "https://webfanat.com:9090/article_id/?id=189#flag" получаем "http://webfanat.com:9090/article_id/?id=90".

Я думаю вы оценили полезность объекта URL при обработке url строк. Пишите ваши комментарии, не забывайте подписываться на блог.

Переходите в группу вконтакте youtube канал

С вами был Грибин Андрей. Ждите выхода новых статей!