Как извлечь базовый URL из строки в JavaScript?

Question

Я пытаюсь найти относительно простой и надежный способ извлечения базового URL из строковой переменной с помощью JavaScript (или jQuery).

Например, что-то вроде:

http://www.sitename.com/article/2009/09/14/this-is-an-article/

Я бы хотел получить:

http://www.sitename.com/

Является ли регулярное выражение лучшей ставкой? Если да, то какой оператор можно использовать для назначения базового URL-адреса, извлеченного из заданной строки, новой переменной?

Я провел некоторый поиск по этому вопросу, но все, что я нахожу в мире JavaScript, похоже, вращается вокруг сбора этой информации из фактического URL документа, используя location.host или подобное.

Answer 1

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

var pathArray = "https://somedomain.com".split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + '//' + host;

Или используйте решение Дэвидса снизу.

Answer 2

Браузеры на базе WebKit, Firefox начиная с версии 21 и текущие версии Internet Explorer (IE 10 и 11) реализуют location.origin.

location.origin включает протокол , домен и, опционально, порт URL-адреса.

Например, location.origin URL http://www.sitename.com/article/2009/09/14/this-is-an-article/ - это http://www.sitename.com.

Для таргетинга на браузеры без поддержки location.origin используйте следующий лаконичный полифилл:

if (typeof location.origin === 'undefined')
    location.origin = location.protocol + '//' + location.host;

Answer 3

Не нужно использовать jQuery, просто используйте

location.hostname

Answer 4

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

//create a new element link with your link
var a = document.createElement("a");
a.href="http://www.sitename.com/article/2009/09/14/this-is-an-article/";

//hide it from view when it is added
a.style.display="none";

//add it
document.body.appendChild(a);

//read the links "features"
alert(a.protocol);
alert(a.hostname)
alert(a.pathname)
alert(a.port);
alert(a.hash);

//remove it
document.body.removeChild(a);

Вы можете легко сделать это, добавив элемент jQuery и прочитав его атрибут.

Answer 5

var host = location.protocol + '//' + location.host + '/';

Answer 6

String.prototype.url = function() {
  const a = $('<a />').attr('href', this)[0];
  // or if you are not using jQuery ??
  // const a = document.createElement('a'); a.setAttribute('href', this);
  let origin = a.protocol + '//' + a.hostname;
  if (a.port.length > 0) {
    origin = `${origin}:${a.port}`;
  }
  const {host, hostname, pathname, port, protocol, search, hash} = a;
  return {origin, host, hostname, pathname, port, protocol, search, hash};

}

Тогда:

'http://mysite:5050/pke45#23'.url()
 //OUTPUT : {host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050", protocol: "http:",hash:"#23",origin:"http://mysite:5050"}

Для запроса необходимо:

 'http://mysite:5050/pke45#23'.url().origin

Обзор 07-2017: он также может быть более элегантным и имеет больше возможностей

const parseUrl = (string, prop) =>  {
  const a = document.createElement('a'); 
  a.setAttribute('href', string);
  const {host, hostname, pathname, port, protocol, search, hash} = a;
  const origin = `${protocol}//${hostname}${port.length ? `:${port}`:''}`;
  return prop ? eval(prop) : {origin, host, hostname, pathname, port, protocol, search, hash}
}

Тогда

parseUrl('http://mysite:5050/pke45#23')
// {origin: "http://mysite:5050", host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050"…}


parseUrl('http://mysite:5050/pke45#23', 'origin')
// "http://mysite:5050"

Cool!

Answer 7

Если вы используете jQuery, это отличный способ манипулировать элементами в javascript без добавления их в DOM:

var myAnchor = $("<a />");

//set href    
myAnchor.attr('href', 'http://example.com/path/to/myfile')

//your link's features
var hostname = myAnchor.attr('hostname'); // http://example.com
var pathname = myAnchor.attr('pathname'); // /path/to/my/file
//...etc

Answer 8

Легким, но полным подходом к получению базовых значений из строкового представления URL является правило регулярного выражения Дугласа Крокфорда:

var yourUrl = "http://www.sitename.com/article/2009/09/14/this-is-an-article/";
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var parts = parse_url.exec( yourUrl );
var result = parts[1]+':'+parts[2]+parts[3]+'/' ;

Если вам нужен более мощный инструментарий для манипулирования URL-адресами, попробуйте URI.js Он поддерживает методы получения, установки, нормализации URL-адресов и т. Д. С красивым цепным API.

Если вы ищете плагин jQuery, тогда jquery.url.js должен помочь вам

Более простой способ сделать это - использовать элемент привязки, как предложил @epascarello. Это имеет тот недостаток, что вам нужно создать элемент DOM. Однако это можно кэшировать в закрытии и использовать повторно для нескольких URL:

var parseUrl = (function () {
  var a = document.createElement('a');
  return function (url) {
    a.href = url;
    return {
      host: a.host,
      hostname: a.hostname,
      pathname: a.pathname,
      port: a.port,
      protocol: a.protocol,
      search: a.search,
      hash: a.hash
    };
  }
})();

Используйте это так:

paserUrl('http://google.com');

Answer 9

Я использую простое регулярное выражение, которое извлекает хост из URL:

function get_host(url){
    return url.replace(/^((\w+:)?\/\/[^\/]+\/?).*$/,'$1');
}

и используйте его вот так

var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/'
var host = get_host(url);

Обратите внимание, что если url не заканчивается /, host не заканчивается /.

Вот несколько тестов:

describe('get_host', function(){
    it('should return the host', function(){
        var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://www.sitename.com/');
    });
    it('should not have a / if the url has no /', function(){
        var url = 'http://www.sitename.com';
        assert.equal(get_host(url),'http://www.sitename.com');
    });
    it('should deal with https', function(){
        var url = 'https://www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'https://www.sitename.com/');
    });
    it('should deal with no protocol urls', function(){
        var url = '//www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'//www.sitename.com/');
    });
    it('should deal with ports', function(){
        var url = 'http://www.sitename.com:8080/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://www.sitename.com:8080/');
    });
    it('should deal with localhost', function(){
        var url = 'http://localhost/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://localhost/');
    });
    it('should deal with numeric ip', function(){
        var url = 'http://192.168.18.1/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://192.168.18.1/');
    });
});

Answer 10

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

alert("document.URL : "+document.URL);
alert("document.location.href : "+document.location.href);
alert("document.location.origin : "+document.location.origin);
alert("document.location.hostname : "+document.location.hostname);
alert("document.location.host : "+document.location.host);
alert("document.location.pathname : "+document.location.pathname);