JavaScript - Teil des URL-Pfads abrufen

Antworten:

425

Es gibt eine Eigenschaft des integrierten window.locationObjekts, die diese für das aktuelle Fenster bereitstellt.

// If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a

Aktualisieren Sie, verwenden Sie die gleichen Eigenschaften für jede URL:

Es stellt sich heraus, dass dieses Schema als Schnittstelle namens URLUtils standardisiert wird , und wissen Sie was? Sowohl das vorhandene window.locationObjekt als auch die Ankerelemente implementieren die Schnittstelle.

Sie können also für jede URL dieselben Eigenschaften wie oben verwenden. Erstellen Sie einfach einen Anker mit der URL und greifen Sie auf die Eigenschaften zu:

var el = document.createElement('a');
el.href = "http://www.somedomain.com/account/search?filter=a#top";

el.host        // www.somedomain.com (includes port if there is one[1])
el.hostname    // www.somedomain.com
el.hash        // #top
el.href        // http://www.somedomain.com/account/search?filter=a#top
el.pathname    // /account/search
el.port        // (port if there is one[1])
el.protocol    // http:
el.search      // ?filter=a

[1]: Die Browserunterstützung für die Eigenschaften, die den Port enthalten, ist nicht konsistent. Siehe: http://jessepollak.me/chrome-was-wrong-ie-was-right

Dies funktioniert in den neuesten Versionen von Chrome und Firefox . Ich habe keine Versionen von Internet Explorer zum Testen. Testen Sie sich daher anhand des JSFiddle-Beispiels.

JSFiddle-Beispiel

Es gibt auch ein URLObjekt, das diese Unterstützung für URLs selbst ohne das Ankerelement bietet. Es sieht so aus, als ob derzeit keine stabilen Browser dies unterstützen, aber es wird gesagt, dass es in Firefox 26 verfügbar ist. Wenn Sie glauben, dass Sie Unterstützung dafür haben, probieren Sie es hier aus .

Nicole
quelle
OP fragte nach "einer URL", nicht nach "der aktuellen URL des Fensters". Was ist, wenn Sie eine URL als Zeichenfolge haben?
Josh Noe
2
@JoshNoe Es stellt sich heraus, dass Sie jetzt dieselben Eigenschaften für Ankerelemente verwenden können. Siehe die aktualisierte Antwort.
Nicole
Danke für die nette Information. Ich habe mit IE 9 und IE 8 getestet (verwenden Sie IE 9 zum Simulieren), beide funktionieren. Funktioniert natürlich mit der neuesten Version von Chrome und Firefox :)
Zhao
49 
window.location.href.split('/');

Sie erhalten ein Array mit allen URL-Teilen, auf die Sie wie bei einem normalen Array zugreifen können.

Oder eine immer elegantere Lösung, die von @Dylan vorgeschlagen wurde und nur die Pfadteile enthält:

window.location.pathname.split('/');
Jose Faeti
quelle
2
window.location.pathname.split ('/'); ist in den meisten Fällen eine elegantere Lösung, wenn Sie versuchen, auf die verschiedenen Abschnitte der URL über das Standardprotokoll und www usw. zuzugreifen.
Dylan
1
window.location.pathname.split ('/'). filter (Funktion (v) {return v;}); entfernt leere Elemente für Javascript 1.6 und höher.
Dhaval Desai
28

Wenn dies die aktuelle URL ist, verwenden Sie window.location.pathname. Verwenden Sie andernfalls diesen regulären Ausdruck:

var reg = /.+?\:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];
niemand
quelle
Fast perfekt - aber im Gegensatz zu window.location.pathname enthält es unter Windows nicht den Laufwerksbuchstaben im Pfadnamen.
Theo
1
Verwenden Sie für einen /.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/
regulären Ausdruck,
3

Es gibt eine nützliche Web-API-Methode namens URL

const url = new URL('http://www.somedomain.com/account/search?filter=a#top');
console.log(url.pathname.split('/'));
const params = new URLSearchParams(url.search)
console.log(params.get("filter"))
Erweitern Sie das Snippet

mplungjan
quelle
0

Wenn Sie Teile einer URL erhalten möchten, die Sie in einer Variablen gespeichert haben, kann ich URL-Parse empfehlen

const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');

Gemäß der Dokumentation werden die folgenden Teile extrahiert:

Die zurückgegebene URL-Instanz enthält die folgenden Eigenschaften:

Protokoll: Das Protokollschema der URL (zB http :). Schrägstriche: Ein Boolescher Wert, der angibt, ob dem Protokoll zwei Schrägstriche (//) folgen. auth: Authentifizierungsinformationsteil (z. B. Benutzername: Passwort). Benutzername: Benutzername der Basisauthentifizierung. Passwort: Passwort der Basisauthentifizierung. Host: Hostname mit Portnummer. Hostname: Hostname ohne Portnummer. Port: Optionale Portnummer. Pfadname: URL-Pfad. Abfrage: Analysiertes Objekt, das eine Abfragezeichenfolge enthält, es sei denn, die Analyse ist auf false gesetzt. Hash: Der "Fragment" -Teil der URL einschließlich des Nummernzeichens (#). href: Die vollständige URL. Ursprung: Der Ursprung der URL.

Marian Klühspies
quelle
0

Wenn Sie eine abstrakte URL-Zeichenfolge haben (nicht aus der aktuellen window.location), können Sie diesen Trick verwenden:

let yourUrlString = "http://example.com:3000/pathname/?search=test#hash";

let parser = document.createElement('a');
parser.href = yourUrlString;

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

Danke an jlong

krolovolk
quelle