JavaScript - Teil des URL-Pfads abrufen

Was ist der richtige Weg, um mit JavaScript nur den Pfad aus einer URL zu ziehen?

Beispiel:
Ich habe die URL
http://www.somedomain.com/account/search?filter=a#top
, möchte aber nur diesen Teil
/ Konto / Suche erhalten

Ich verwende jQuery, wenn es etwas gibt, das genutzt werden kann.

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 .

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

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

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

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.

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