JavaScript - pobierz część ścieżki adresu URL

Odpowiedzi:

425

Istnieje właściwość obiektu wbudowanego window.location, która zapewni to dla bieżącego okna.

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

Zaktualizuj, użyj tych samych właściwości dla każdego adresu URL:

Okazuje się, że ten schemat jest standaryzowany jako interfejs o nazwie URLUtils , i wiecie co? Interfejs implementuje zarówno istniejący window.locationobiekt, jak i elementy zakotwiczenia .

Możesz więc użyć tych samych właściwości powyżej dla dowolnego adresu URL - po prostu utwórz kotwicę z adresem URL i uzyskaj dostęp do właściwości:

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]: Obsługa przeglądarek dla właściwości zawierających port nie jest spójna, patrz: http://jessepollak.me/chrome-was-wrong-ie-was-right

Działa to w najnowszych wersjach Chrome i Firefox . Nie mam wersji przeglądarki Internet Explorer do przetestowania, więc sprawdź się na przykładzie JSFiddle.

Przykład JSFiddle

Jest też nadchodzący URLobiekt, który będzie oferował wsparcie dla samych adresów URL, bez elementu zakotwiczenia. Wygląda na to, że w tej chwili żadna stabilna przeglądarka go nie obsługuje, ale mówi się, że pojawi się w Firefoksie 26. Jeśli myślisz, że możesz go obsługiwać, wypróbuj go tutaj .

Nicole
źródło
OP poprosił o „adres URL”, a nie o „bieżący adres URL okna”. A co, jeśli masz adres URL jako ciąg?
Josh Noe
2
@JoshNoe Okazuje się, że możesz teraz używać tych samych właściwości w elementach zakotwiczenia. Zobacz zaktualizowaną odpowiedź.
Nicole
Dzięki za miłą informację. Testowałem z IE 9 i IE 8 (użyj IE 9 do symulacji) obie działają. Oczywiście działa z najnowszą wersją Chrome i Firefox :)
Zhao
49 
window.location.href.split('/');

Da ci tablicę zawierającą wszystkie części adresu URL, do których masz dostęp jak do zwykłej tablicy.

Lub coraz bardziej eleganckie rozwiązanie sugerowane przez @Dylan, tylko z fragmentami ścieżki:

window.location.pathname.split('/');
Jose Faeti
źródło
2
window.location.pathname.split („/”); jest bardziej eleganckim rozwiązaniem w większości przypadków, jeśli próbujesz uzyskać dostęp do różnych sekcji adresu URL poza standardowym protokołem i www itp.
Dylan
1
window.location.pathname.split ('/'). filter (function (v) {return v;}); usunie puste elementy z Javascript 1.6 i nowszych.
Dhaval Desai
28

Jeśli to jest aktualny adres URL, użyj window.location.pathname, w przeciwnym razie użyj tego wyrażenia regularnego:

var reg = /.+?\:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];
nikt
źródło
Prawie idealne - ale w przeciwieństwie do window.location.pathname nie zawiera litery dysku w nazwie ścieżki w systemie Windows.
Theo
1
Aby uzyskać wyrażenie regularne, które działa nawet wtedy, gdy nie ma ścieżki, użyj:/.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/
Scottmas
3

Istnieje przydatna metoda interfejsu API sieci Web o nazwie 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"))
Rozwiń fragment

mplungjan
źródło
0

Jeśli chcesz uzyskać części adresu URL, które przechowujesz w zmiennej, mogę polecić URL-Parse

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

Zgodnie z dokumentacją wyodrębnia następujące części:

Zwrócona instancja adresu URL zawiera następujące właściwości:

protokół: schemat protokołu adresu URL (np. http :). ukośniki: wartość logiczna wskazująca, czy po protokole następują dwa ukośniki (//). auth: Informacje uwierzytelniające (np. nazwa użytkownika: hasło). nazwa użytkownika: nazwa użytkownika uwierzytelniania podstawowego. hasło: hasło podstawowego uwierzytelnienia. host: nazwa hosta z numerem portu. nazwa hosta: nazwa hosta bez numeru portu. port: opcjonalny numer portu. pathname: ścieżka adresu URL. zapytanie: przeanalizowany obiekt zawierający ciąg zapytania, chyba że analizowanie ma wartość false. hash: „fragment” adresu URL, zawierający znak krzyżyka (#). href: pełny adres URL. origin: pochodzenie adresu URL.

Marian Klühspies
źródło
0

Jeśli masz abstrakcyjny ciąg adresu URL (nie z bieżącego window.location), możesz użyć tej sztuczki:

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"

Dzięki jlong

krolovolk
źródło