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

Question

est-il vraiment un moyen facile de démarrer à partir d'une URL complète:

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

Et extraire seulement la partie hôte:

aaa.bbb.ccc.com 

Il doit y être une fonction JavaScript qui le fait de manière fiable, mais je ne peux pas le trouver.

Answer 1

supposons que vous avez une page avec cette adresse : http://sub.domain.com/virtualPath/page.htm.utilisez les touches suivantes dans le code de la page à achive 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: sur le .origin

***** Comme la compatibilité ref états, navigateur pour window.location.origin n'est pas clair. Je l'ai vérifié en chrome et retourné http://sub.domain.com:port si le port est tout sauf 80 et http://sub.domain.com si le port est 80.

Remerciements à @torazaburo pour mentionner que pour moi.

Answer 2

Essayez

document.location.host 

ou

document.location.hostname 

Answer 3

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

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

Pour une url, laissez dire 'http://stackoverflow.com/questions', il retournera 'http://stackoverflow.com'

Answer 4

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

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

Answer 5

Il existe deux façons. La première est une variante d'une autre réponse ici, mais celui-ci des comptes pour les ports non définis 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 une chaîne URI):

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

Answer 6

Vérifier ceci:

alert(window.location.hostname); 

cela renvoie le nom d'hôte www.domain.com

et:

window.location.host 

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

Pour vérifier le site Mozilla developer complet de référence.

Answer 7

utilisation

window.location.origin

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

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

Answer 8

Il ya un autre hack que j'utilise et que je n'ai jamais vu dans une réponse StackOverflow: en utilisant 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 comme http://domain.com/somesite/index.html, root sera réglé sur http://domain.com/somesite/. Cela fonctionne également pour localhost ou toute URL de base valide. Notez que cela provoquera une demande HTTP échouée sur l'image factice . Vous pouvez utiliser une image existante à la place 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 n'ai pas testé sur tous les navigateurs, cependant.

Answer 9

Je voudrais préciser quelque chose. Si quelqu'un veut obtenir l'ensemble url avec le chemin comme je l'ai besoin, vous pouvez utiliser:

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

Answer 10

La réponse acceptée n'a pas fonctionné pour moi depuis que voulait être en mesure de travailler avec tout d'URL arbitraire, pas seulement la page en cours URL

Jetez un oeil à la URL object:

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" 

Answer 11

Comme l'a dit Martin, les autres réponses ne fonctionnent pas avec les urls arbitraires. Le nouveau URL object fonctionnera mais est toujours expérimental et non compatible avec tous les navigateurs.

Pour une solution plus fiable et multi-navigateur, vous pouvez utiliser this component que j'ai construit pour analyser une URL arbitraire en propriétés similaires à celles trouvées dans l'objet URL ci-dessus.

Par exemple:

var urlObject = parseUrl('http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah'); 
var newUrl = urlObject.hostname; 

newUrl contient maintenant

aaa.bbb.ccc.com 

Vous pouvez importer le composant à utiliser parseURL()

Answer 12

Je sais que c'est un peu en retard, mais j'ai fait une petite fonction propre avec une petite syntaxe ES6

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

Il pourrait également être writen dans ES5 comme

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

Bien sûr IE doen't soutien Object.assign, mais dans ma ligne de travail, qui n'a pas d'importance.