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



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



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



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


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



http://www.sitename.com/


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



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

1265   18  

18 ответов:

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

var pathArray = location.href.split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + '//' + host;

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

браузеры на основе 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;

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

location.hostname

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

//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, добавляя элемент и читая его attr.

var host = location.protocol + '//' + location.host + '/';
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"

круто!

Если вы используете 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

легкий, но полный подход к получению базовых значений из строкового представления 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');

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

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

и использовать его в таком виде

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

обратите внимание, если url не заканчивается / the 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/');
    });
});

вы можете использовать приведенные ниже коды для получения различных параметров текущего 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);
function getBaseURL() {
    var url = location.href;  // entire url including querystring - also: window.location.href;
    var baseURL = url.substring(0, url.indexOf('/', 14));


    if (baseURL.indexOf('http://localhost') != -1) {
        // Base Url for localhost
        var url = location.href;  // window.location.href;
        var pathname = location.pathname;  // window.location.pathname;
        var index1 = url.indexOf(pathname);
        var index2 = url.indexOf("/", index1 + 1);
        var baseLocalUrl = url.substr(0, index2);

        return baseLocalUrl + "/";
    }
    else {
        // Root Url for domain name
        return baseURL + "/";
    }

}

затем вы можете использовать его как это...

var str = 'http://en.wikipedia.org/wiki/Knopf?q=1&t=2';
var url = str.toUrl();

значение URL-адрес будет...

{
"original":"http://en.wikipedia.org/wiki/Knopf?q=1&t=2",<br/>"protocol":"http:",
"domain":"wikipedia.org",<br/>"host":"en.wikipedia.org",<br/>"relativePath":"wiki"
}

"var url" также содержит два метода.

var paramQ = url.getParameter('q');

в этом случае значение paramQ будет равно 1.

var allParameters = url.getParameters();

значение allParameters будет только имена параметров.

["q","t"]

протестировано на IE, chrome и firefox.

если вы извлекаете информацию из окна.местоположение.href (адресная строка), затем используйте этот код, чтобы получить http://www.sitename.com/:

var loc = location;
var url = loc.protocol + "//" + loc.host + "/";

если у вас есть строка, str, то есть произвольный URL (не окно.местоположение.href), затем используйте регулярные выражения:

var url = str.match(/^(([a-z]+:)?(\/\/)?[^\/]+\/).*$/)[1];

Я, как и все во Вселенной, ненавижу читать регулярные выражения, поэтому я разбил его на английском языке:

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

нет необходимости создавать элементы DOM или делать что-то сумасшедшее.

вместо того, чтобы учитывать окно.местоположение.протокол и окно.местоположение.происхождение и, возможно, отсутствует указанный номер порта и т. д., просто возьмите все до 3-го"/":

// get nth occurrence of a character c in the calling string
String.prototype.nthIndex = function (n, c) {
    var index = -1;
    while (n-- > 0) {
        index++;
        if (this.substring(index) == "") return -1; // don't run off the end
        index += this.substring(index).indexOf(c);
    }
    return index;
}

// get the base URL of the current page by taking everything up to the third "/" in the URL
function getBaseURL() {
    return document.URL.substring(0, document.URL.nthIndex(3,"/") + 1);
}

вы можете сделать это с помощью регулярного выражения :

/(http:\/\/)?(www)[^\/]+\//i

подойдет ли он ?

это работает:

location.href.split(location.pathname)[0];

это работает для меня:

var getBaseUrl = function (url) {
  if (url) {
    var parts = url.split('://');
    
    if (parts.length > 1) {
      return parts[0] + '://' + parts[1].split('/')[0] + '/';
    } else {
      return parts[0].split('/')[0] + '/';
    }
  }
};

var tilllastbackslashregex = новое регулярное выражение ( / ^.*//); baseUrl = tilllastbackslashregex.метод exec(окна.местоположение.href);

Ну URL API object позволяет избежать разделения и построения url-адреса вручную.

 let url = new URL('https://stackoverflow.com/questions/1420881');
 alert(url.origin);

Comments

    Ничего не найдено.