J'essaie de trouver une méthode relativement simple 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/

J'aimerais avoir:

http://www.sitename.com/

Une expression régulière est-elle le meilleur pari? Si tel est le cas, quelle instruction puis-je utiliser pour affecter 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 réelle du document en utilisant location.host ou similaire.

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 en une ligne ... eh bien, désolé, c'est pourquoi nous utilisons des minimiseurs de code, le code doit être lisible par l'homme et c'est mieux ... à mon avis.

var pathArray = "https://somedomain.com".split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + '//' + host;

Ou utilisez la solution de Davids par le bas.

Les navigateurs WebKit, Firefox à partir de la version 21 et les versions actuelles d'Internet Explorer (IE 10 et 11) sont implémentés location.origin.

location.origininclut le protocole , le domaine et éventuellement le port de l'URL.

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

Pour cibler les navigateurs sans prise en charge, location.originutilisez le polyfill concis suivant:

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

Pas besoin d'utiliser jQuery, utilisez simplement

location.hostname

Il n'y a aucune raison de faire des fractionnements pour obtenir le chemin, le nom d'hôte, etc. d'une chaîne qui est un lien. Il vous suffit 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};

}

Ensuite :

'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

Révision 07-2017: Il peut également être 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}
}

ensuite

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 un moyen plutôt sympa 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 légère mais complète pour obtenir des valeurs de base à partir d'une représentation sous forme de chaîne d'une URL est la règle d'expression régulière 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 êtes à la recherche d'une boîte à outils de manipulation d'URL plus puissants try URI.js Il prend en charge getter, setter, url normalisation etc tous avec une belle api chainable.

Si vous recherchez un plugin jQuery, alors jquery.url.js devrait vous aider

Une façon plus simple de le faire est d'utiliser un élément d'ancrage, comme @epascarello l'a suggéré. Cela présente l'inconvénient de devoir 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');

Eh bien, l' objet API URL évite de diviser et de construire manuellement les URL.

 let url = new URL('/programming/1420881');
 alert(url.origin);

Si vous extrayez des informations de window.location.href (la barre d'adresse), utilisez ce code pour obtenir http://www.sitename.com/:

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

Si vous avez une chaîne,, strc'est une URL arbitraire (et non window.location.href), utilisez des expressions régulières:

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

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

• Trouvez zéro ou plusieurs caractères alpha suivis de 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 par /
• 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.

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

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

et utilisez-le comme ça

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

Notez que si le urlne se termine pas par un, /le hostne se terminera pas par un /.

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 ensuite l'utiliser comme ça ...

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

"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 correspondra uniquement aux noms de paramètres.

["q","t"]

Testé sur IE, Chrome et Firefox.

Au lieu d'avoir à prendre en compte window.location.protocol et window.location.origin, et peut-être manquer un numéro de port spécifié, etc., il suffit de récupérer 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);
}

Cela marche:

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

Vous pouvez le faire en utilisant une regex:

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

est ce que ça va ?

Pour obtenir l'origine de n'importe quelle URL, y compris les chemins dans un site Web ( /my/path) ou schemaless ( //example.com/my/path), ou complet (http://example.com/my/path ), j'ai mis en place une fonction rapide.

Dans l'extrait ci-dessous, les trois appels doivent être enregistrés https://stacksnippets.net.

function getOrigin(url)
{
  if(/^\/\//.test(url))
  { // no scheme, use current scheme, extract domain
    url = window.location.protocol + url;
  }
  else if(/^\//.test(url))
  { // just path, use whole origin
    url = window.location.origin + url;
  }
  return url.match(/^([^/]+\/\/[^/]+)/)[0];
}

console.log(getOrigin('https://stacksnippets.net/my/path'));
console.log(getOrigin('//stacksnippets.net/my/path'));
console.log(getOrigin('/my/path'));

Cela 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 = new RegExp(/^.*\//);
baseUrl = tilllastbackslashregex.exec(window.location.href);

window.location.href donne l'adresse URL actuelle de la barre d'adresse du navigateur

cela peut être n'importe quoi comme https://stackoverflow.com/abc/xyz ou https://www.google.com/search?q=abc tilllastbackslashregex.exec () exécutez regex et relancez la chaîne correspondante jusqu'au dernier backslash, c'est-à-dire https : //stackoverflow.com/abc/ ou https://www.google.com/ respectivement

Un bon moyen consiste à utiliser un URLobjet API natif JavaScript . Cela fournit de nombreuses parties d'url utiles.

Par exemple:

const url = '/programming/1420881/how-to-extract-base-url-from-a-string-in-javascript'

const urlObject = new URL(url);

console.log(urlObject);


// RESULT: 
//________________________________
hash: "",
host: "stackoverflow.com",
hostname: "stackoverflow.com",
href: "/programming/1420881/how-to-extract-base-url-from-a-string-in-javascript",
origin: "https://stackoverflow.com",
password: "",
pathname: "/questions/1420881/how-to-extract-base-url-from-a-string-in-javaript",
port: "",
protocol: "https:",
search: "",
searchParams: [object URLSearchParams]
... + some other methods

Comme vous pouvez le voir ici, vous pouvez accéder à tout ce dont vous avez besoin.

Par exemple: console.log(urlObject.host); // "stackoverflow.com"

doc pour URL