Ich versuche, eine relativ einfache und zuverlässige Methode zu finden, um die Basis-URL mithilfe von JavaScript (oder jQuery) aus einer Zeichenfolgenvariablen zu extrahieren.

Zum Beispiel gegeben etwas wie:

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

Ich würde gerne bekommen:

http://www.sitename.com/

Ist ein regulärer Ausdruck die beste Wahl? Wenn ja, mit welcher Anweisung kann ich die aus einer bestimmten Zeichenfolge extrahierte Basis-URL einer neuen Variablen zuweisen?

Ich habe einige Nachforschungen angestellt, aber alles, was ich in der JavaScript-Welt finde, scheint sich darum zu drehen, diese Informationen mithilfe von location.host oder ähnlichem aus der tatsächlichen Dokument-URL zu sammeln .

Bearbeiten: Einige beschweren sich, dass das Protokoll nicht berücksichtigt wird. Deshalb habe ich beschlossen, den Code zu aktualisieren, da er als Antwort markiert ist. Für diejenigen, die einzeiligen Code mögen ... tut mir leid, warum wir Code-Minimierer verwenden. Code sollte für Menschen lesbar sein und dieser Weg ist besser ... meiner Meinung nach.

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

Oder verwenden Sie Davids Lösung von unten.

WebKit-basierte Browser, Firefox ab Version 21 und aktuelle Versionen von Internet Explorer (IE 10 und 11) werden implementiert location.origin.

location.originEnthält das Protokoll , die Domain und optional den Port der URL.

Zum Beispiel location.originder URL http://www.sitename.com/article/2009/09/14/this-is-an-article/ist http://www.sitename.com.

Um Browser ohne Unterstützung für die location.originVerwendung zu verwenden, verwenden Sie die folgende übersichtliche Polyfüllung:

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

Sie müssen jQuery nicht verwenden, sondern nur

location.hostname

Es gibt keinen Grund, Teilungen vorzunehmen, um den Pfad, den Hostnamen usw. von einer Zeichenfolge abzurufen, die eine Verknüpfung darstellt. Sie müssen nur einen Link verwenden

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

Sie können dies einfach tun, indem jQuery das Element anfügt und dessen Attribut liest.

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

}

Dann :

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

Für Ihre Anfrage benötigen Sie:

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

Rückblick 07-2017: Es kann auch eleganter sein und hat mehr Funktionen

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

Dann

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!

Wenn Sie jQuery verwenden, ist dies eine coole Möglichkeit, Elemente in Javascript zu bearbeiten, ohne sie dem DOM hinzuzufügen:

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

Douglas Crockfords Regexp-Regel ist ein einfacher, aber vollständiger Ansatz, um Grundwerte aus einer Zeichenfolgendarstellung einer URL zu erhalten:

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

Wenn Sie nach einem leistungsstärkeren Toolkit zur URL-Manipulation suchen, versuchen Sie es mit URI.js. Es unterstützt Getter, Setter, URL-Normalisierung usw. mit einer schönen verkettbaren API.

Wenn Sie nach einem jQuery-Plugin suchen, sollte Ihnen jquery.url.js helfen

Eine einfachere Möglichkeit ist die Verwendung eines Ankerelements, wie von @epascarello vorgeschlagen. Dies hat den Nachteil, dass Sie ein DOM-Element erstellen müssen. Dies kann jedoch in einem Abschluss zwischengespeichert und für mehrere URLs wiederverwendet werden:

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

Verwenden Sie es so:

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

Nun, das URL-API-Objekt vermeidet das manuelle Teilen und Erstellen der URLs.

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

Wenn Sie Informationen aus window.location.href (der Adressleiste) extrahieren, verwenden Sie diesen Code, um Folgendes abzurufen http://www.sitename.com/:

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

Wenn Sie eine Zeichenfolge haben str, dh eine beliebige URL (nicht window.location.href), verwenden Sie reguläre Ausdrücke:

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

Ich hasse es, wie jeder im Universum, reguläre Ausdrücke zu lesen, deshalb werde ich es auf Englisch aufschlüsseln:

• Suchen Sie null oder mehr Alpha-Zeichen, gefolgt von einem Doppelpunkt (das Protokoll, das weggelassen werden kann).
• Gefolgt von // (kann auch weggelassen werden)
• Gefolgt von allen Zeichen außer / (Hostname und Port)
• Gefolgt von /
• Gefolgt von was auch immer (der Pfad, weniger der Anfang /).

Keine Notwendigkeit, DOM-Elemente zu erstellen oder etwas Verrücktes zu tun.

Ich verwende einen einfachen regulären Ausdruck, der den Host aus der URL extrahiert:

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

und benutze es so

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

Beachten Sie , wenn die urlnicht mit einem Ende /der hostnicht in einem Ende /.

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

Sie können die folgenden Codes verwenden, um verschiedene Parameter der aktuellen URL abzurufen

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

}

Sie können es dann so verwenden ...

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

Der Wert von url wird ...

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

Die "var url" enthält auch zwei Methoden.

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

In diesem Fall ist der Wert von paramQ 1.

var allParameters = url.getParameters();

Der Wert von allParameters sind nur die Parameternamen.

["q","t"]

Getestet auf IE, Chrome und Firefox.

Anstatt window.location.protocol und window.location.origin zu berücksichtigen und möglicherweise eine angegebene Portnummer usw. zu verpassen, greifen Sie einfach alles bis zum 3. "/":

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

Das funktioniert:

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

Sie können dies mit einem regulären Ausdruck tun:

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

passt es ?

Um den Ursprung einer URL zu ermitteln, einschließlich Pfaden innerhalb einer Website ( /my/path) oder schemaless ( //example.com/my/path) oder vollständig (http://example.com/my/path ), habe ich eine Schnellfunktion zusammengestellt.

Im folgenden Snippet sollten alle drei Anrufe protokolliert werden 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'));

Das funktioniert bei mir:

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 gibt die aktuelle URL-Adresse in der Adressleiste des Browsers an

Es kann sich um https://stackoverflow.com/abc/xyz oder https://www.google.com/search?q=abc tilllastbackslashregex.exec () handeln. Führen Sie regex aus und führen Sie die übereinstimmende Zeichenfolge bis zum letzten Backslash erneut aus, dh https : //stackoverflow.com/abc/ oder https://www.google.com/ jeweils

Ein guter Weg ist die Verwendung eines nativen JavaScript-API- URLObjekts. Dies bietet viele nützliche URL-Teile.

Beispielsweise:

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

Wie Sie hier sehen können, können Sie einfach auf alles zugreifen, was Sie benötigen.

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

doc für URL