Comment extraire L'URL de base d'une chaîne en JavaScript?

J'essaie de trouver une méthode relativement facile et fiable pour extraire l'URL de base d'une variable de chaîne en utilisant JavaScript (ou jQuery).

Par exemple, étant donné quelque chose comme:

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

Je voudrais obtenir:

http://www.sitename.com/

Une expression régulière est-elle la meilleure option? Si oui, quelle instruction pourrais-je utiliser pour attribuer l'URL de base extraite d'une chaîne donnée à une nouvelle variable?

J'ai fait quelques recherches à ce sujet, mais tout ce que je trouve dans le monde JavaScript semble tourner autour de la collecte de ces informations à partir de L'URL du document réel en utilisant emplacement.hôte ou similaire.

156
demandé sur kenorb 2009-09-14 14:58:16

18 réponses

Edit: certains se plaignent que cela ne prend pas en compte le protocole. J'ai donc décidé de mettre à jour le code, car il est marqué comme réponse. Pour ceux qui aiment le code d'une ligne... Eh bien désolé ce pourquoi nous utilisons des minimiseurs de code, le code devrait être lisible par l'homme et de cette façon est mieux... dans mon opinion.

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

Ou utilisez la solution Davids par le bas.

187
répondu Community 2017-05-23 12:34:38

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;
145
répondu David 2015-03-25 21:03:10

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

location.hostname
44
répondu daddywoodland 2015-02-10 09:14:47

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.

28
répondu epascarello 2009-09-14 11:39:43
var host = location.protocol + '//' + location.host + '/';
20
répondu kta 2015-02-10 09:15:04
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!

15
répondu Abdennour TOUMI 2017-07-07 13:45:15

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
12
répondu Wayne 2010-08-21 02:21:16

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');
10
répondu alexandru.topliceanu 2012-07-17 06:04:39

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/');
    });
});
6
répondu Michael_Scharf 2015-04-07 12:56:32

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);
5
répondu Nimesh07 2014-06-19 14:46:58
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.

4
répondu shaikh 2013-02-28 17:00:26

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.

4
répondu BMiner 2015-02-10 09:15:32

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);
}
3
répondu sova 2012-01-11 21:33:33

Vous pouvez le faire en utilisant une expression rationnelle:

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

Correspond-T-il ?

2
répondu Clement Herreman 2009-09-14 11:03:58

Cela fonctionne:

location.href.split(location.pathname)[0];
2
répondu Alain Beauvois 2015-02-10 09:15:51

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] + '/';
    }
  }
};
0
répondu abelabbesnabi 2017-05-11 16:42:17

Var tilllastbackslashregex = nouvelle expression rationnelle ( / ^.*//); baseUrl = tilllastbackslashregex.exec(fenêtre.emplacement.href);

0
répondu Hasib Ullah Khan 2017-12-05 06:30:10

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);
0
répondu devansvd 2018-05-21 12:44:20