Navigateurs WebKit, Firefox à partir de la version 21 et les versions actuelles D'Internet Explorer (IE 10 et 11) implémentent location.origin.

location.origin comprend la protocole, le domaine, et éventuellement l' port de l'URL.

Par exemple location.origin de l'URL http://www.sitename.com/article/2009/09/14/this-is-an-article/ est http://www.sitename.com.

Pour cibler les navigateurs sans support pour location.origin utilisez le polyfill concis suivant:

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

N'avez pas besoin d'utiliser jQuery, utilisez simplement

location.hostname

Il N'y a aucune raison de faire des splits pour obtenir le chemin, le nom d'hôte, etc. à partir d'une chaîne qui est un lien. Vous avez juste besoin d'utiliser un lien

//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);

Vous pouvez facilement le faire avec jQuery en ajoutant l'élément et en lisant son 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};

}

Puis:

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

Pour votre demande, vous avez besoin de:

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

Review 07-2017: il peut être aussi plus élégant et a plus de fonctionnalités

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}
}

Puis

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!

Si vous utilisez jQuery, c'est une façon un peu cool de manipuler des éléments en javascript sans les ajouter au 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

Une approche lightway mais complète pour obtenir des valeurs de base à partir d'une représentation de chaîne D'une URL est la règle regexp de Douglas Crockford:

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]+'/' ;

Si vous cherchez une boîte à outils de manipulation D'URL plus puissante, essayez URI.js Il prend en charge les getters,setter, la normalisation des url, etc. le tout avec une belle api chaînable.

Si vous cherchez un Plugin jQuery, alors jquery.URL.js devrait vous aider

Une façon plus simple de le faire est d'utiliser un élément anchor, comme @ epascarello suggéré. Cela a l'inconvénient que vous devez créer un élément DOM. Cependant, cela peut être mis en cache dans une fermeture et réutilisé pour plusieurs 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
    };
  }
})();

Utilisez-le comme ceci:

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

J'utilise une expression rationnelle simple qui extrait l'hôte de l'url:

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

Et l'utiliser comme ceci

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

Remarque, si la url n'est pas / le host sera pas une partie de /.

Voici quelques tests:

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/');
    });
});

Vous pouvez utiliser les codes ci-dessous pour obtenir différents paramètres de L'URL actuelle

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 + "/";
    }

}

Vous pouvez alors l'utiliser comme ceci...

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

, La valeur de l'url sera...

{
"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"
}

Le "Var url" contient également deux méthodes.

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

Dans ce cas, la valeur de paramQ sera 1.

var allParameters = url.getParameters();

La valeur de allParameters sera uniquement le nom des paramètres.

["q","t"]

Testé sur IE, chrome et firefox.

Si vous extrayez des informations de la fenêtre.emplacement.href (la barre d'adresse), puis utiliser ce code pour obtenir http://www.sitename.com/:

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

Si vous avez une chaîne, str, c'est une URL arbitraire (pas une fenêtre.emplacement.href), puis utilisez des expressions régulières:

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

Comme tout le monde dans l'univers, je déteste lire des expressions régulières, alors je vais le décomposer en anglais:

• trouve zéro ou plusieurs caractères alpha suivis d'un deux-points (le protocole, qui peut être omis)
• suivi de / / (peut également être omis)
• suivi de tous les caractères sauf / (le nom d'hôte et le port)
• Suivi de /
• suivi de tout (le chemin, moins le début /).

Pas besoin de créer des éléments DOM ou de faire quelque chose de fou.

Au lieu d'avoir à rendre compte de window.emplacement.protocole et fenêtre.emplacement.origine, et éventuellement manquant un numéro de port spécifié, etc., il suffit de saisir tout jusqu'au 3ème"/":

// 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);
}

Vous pouvez le faire en utilisant une expression rationnelle:

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

Correspond-T-il ?

Cela fonctionne:

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

Ceci, fonctionne pour moi:

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 = nouvelle expression rationnelle ( / ^.*//); baseUrl = tilllastbackslashregex.exec(fenêtre.emplacement.href);

Eh bien, URL API object évite le fractionnement et la construction manuelle de l'url.

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