x
 
Артём
17 января 2013

Я не очень хорошо владею регулярными выражениями. Как на Яваскрипте распарсить произвольный УРЛ, определить протокол, домен, путь, гет-запрос, хеш?



Действительно, такие выражения пугают и сбивают с толку:

var urlPattern = '^(([^:/\\?#]+):)?(//(([^:/\\?#]*)' +
    '(?::([^/\\?#]*))?))?([^\\?#]*)' +
    '(\\?([^#]*))?(#(.*))?$';

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

Воспользуйтесь браузерным парсером. Создайте новый элемент a и задайте в href адрес, который нужно прочитать. Объект a теперь содержит все искомые свойства:

function parseHref (href) {
  var a = document.createElement('a');
  a.href = href;
  return a;
}

var url = parseHref('http://site.ru/page/123?foo=bar#top');

console.log(url.href); // 'http://site.ru/page/123?foo=bar#top'
console.log(url.protocol); // 'http:'
console.log(url.host); // 'site.ru'
console.log(url.pathname); // '/page/123'
console.log(url.search); // '?foo=bar'
console.log(url.hash); // '#top'

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

url.protocol = 'https:';
url.host = 'ru.site.com';
url.search = url.hash = '';

console.log(url.href); // 'https://ru.site.com/page/123?#'

Использование уже имеющихся ресурсов в первую очередь — выгодный тризовский приём.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Алексей Лебедев
17 января 2013

С параметрами location.search тоже все нетривиально. Я бы сделал так:

https://gist.github.com/4552101

За пример брал кодирование параметров в Хроме. ПХП парсит немного по-другому, например, заменяет пробелы после непробельных символов на подчеркивания.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Недавно всплыло

4 Как избежать «эффекта Тильды»? 2 Как вы проверяете соответствие вёрстки макету 2 Практика: формулировка полезного действия 8