web-dev-qa-db-fra.com

Comment extraire la partie du nom d'hôte d'une URL en JavaScript

Existe-t-il un moyen très simple de partir d'une URL complète:

document.location.href = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah"

Et n'extrayez que la partie hôte:

aaa.bbb.ccc.com

Il doit y avoir une fonction JavaScript qui le fait de manière fiable, mais je ne le trouve pas.

javascripthostname
350
Dustin Getz

supposons que vous ayez une page avec cette adresse: http://sub.domain.com/virtualPath/page.htm. utilisez le code de page suivant pour obtenir ces résultats:

  • window.location.Host: vous obtiendrez sub.domain.com:8080 ou sub.domain.com:80
  • window.location.hostname: vous obtiendrez sub.domain.com
  • window.location.protocol: vous obtiendrez http:
  • window.location.port: vous obtiendrez 8080 ou 80
  • window.location.pathname: vous obtiendrez /virtualPath
  • window.location.Origin: vous obtiendrez http://sub.domain.com *****

Mise à jour: à propos du .Origin

***** Comme l'indique ref , la compatibilité du navigateur pour window.location.Origin n'est pas claire. Je l'ai vérifié dans chrome et il a renvoyé http://sub.domain.com:port si le port est autre que 80, et http://sub.domain.com si le port est 80.

Un merci spécial à @torazaburo de me l'avoir mentionné.

771
Amin Saqi

Vous pouvez concaténer le protocole de localisation et l'hôte:

var root = location.protocol + '//' + location.Host;

Pour une URL, disons 'http://stackoverflow.com/questions', il retournera 'http://stackoverflow.com'

146
CMS

Utilisez l'objet document.location et ses propriétés Host ou hostname.

alert(document.location.hostname); // alerts "stackoverflow.com"
35
n1313

Il y a deux façons. La première est une variante d'une autre réponse ici, mais celle-ci rend compte des ports autres que ceux par défaut:

function getRootUrl() {
  var defaultPorts = {"http:":80,"https:":443};

  return window.location.protocol + "//" + window.location.hostname
   + (((window.location.port)
    && (window.location.port != defaultPorts[window.location.protocol]))
    ? (":"+window.location.port) : "");
}

Mais je préfère cette méthode plus simple (qui fonctionne avec n'importe quelle chaîne d'URI):

function getRootUrl(url) {
  return url.toString().replace(/^(.*\/\/[^\/?#]*).*$/,"$1");
}
21
danorton

La réponse acceptée ne fonctionnait pas pour moi, car je voulais pouvoir travailler avec n'importe quelle URL arbitraire, pas seulement avec l'URL de la page actuelle.

Jetez un coup d'œil à l'objet URL :

var url = new URL("http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah");
url.protocol;  // "http:"
url.hostname;  // "aaa.bbb.ccc.com"
url.pathname;  // "/asdf/asdf/sadf.aspx"
url.search;    // "?blah"
18
Martin Konecny

utilisation

window.location.Origin

et pour: " http://aaa.bbb.ccc.dddd.com/sadf.aspx?blah "

vous obtiendrez: http://aaa.bbb.ccc.ddd.com/

7
Idan Wender

Essayer

document.location.Host

ou

document.location.hostname
6
Chris Nielsen

Il y a un autre hack que j'utilise et que je n'ai jamais vu dans une réponse StackOverflow: utiliser l'attribut "src" d'une image donnera le chemin de base complet de votre site. Par exemple :

var dummy = new Image;
dummy.src = '$';                  // using '' will fail on some browsers
var root = dummy.src.slice(0,-1); // remove trailing '$'

Sur une URL telle que http://domain.com/somesite/index.html, root sera défini sur http://domain.com/somesite/. Cela fonctionne également pour localhost ou toute URL de base valide.

Notez que cela provoquera une requête HTTP échouée sur l'image fictive $. Vous pouvez utiliser une image existante pour éviter cela, avec seulement de légers changements de code.

Une autre variante utilise un lien factice, sans effet secondaire sur les requêtes HTTP:

var dummy = document.createElement ('a');
dummy.href = '';
var root = dummy.href;

Je ne l'ai pas testé sur tous les navigateurs.

3
kuroi neko

Je sais que c'est un peu tard, mais j'ai créé une petite fonction propre avec un peu de syntaxe ES6

function getHost(href){
  return Object.assign(document.createElement('a'), { href }).Host;
}

Il pourrait également être écrit dans ES5 comme

function getHost(href){
  return Object.assign(document.createElement('a'), { href: href }).Host;
}

Bien sûr, IE ne prend pas en charge Object.assign, mais dans mon domaine d'activité, cela n'a pas d'importance.

2
Noah Cardoza

Je voudrais préciser quelque chose. Si quelqu'un veut obtenir l'URL complète avec le chemin dont j'ai besoin, peut utiliser:

var fullUrl = window.location.protocol + "//" + window.location.hostname + window.location.pathname;
2
crx4

Vérifie ça:

alert(window.location.hostname);

cela retournera le nom d'hôte sous la forme www.domain.com

et:

window.location.Host

retournera le nom de domaine avec le port comme www.example.com:80

Pour une vérification complète des références développeur Mozilla site.

2
code.rider

Regex fournit beaucoup plus de flexibilité.

    //document.location.href = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah
    //1.
     var r = new RegExp(/http:\/\/[^/]+/);
     var match = r.exec(document.location.href) //gives http://aaa.bbb.ccc.com

    //2. 
     var r = new RegExp(/http:\/\/[^/]+\/[^/]+/);
     var match = r.exec(document.location.href) //gives http://aaa.bbb.ccc.com/asdf
0
mvs