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

Jaki jest prawidłowy sposób wyciągnięcia samej ścieżki z adresu URL za pomocą JavaScript?

Przykład:
mam adres URL
http://www.somedomain.com/account/search?filter=a#top,
ale chcę tylko uzyskać tę część
/ konto / wyszukiwanie

Używam jQuery, jeśli jest coś, co można wykorzystać.

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 .

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

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

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

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.

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