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

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?#'

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