Ostatni segment adresu URL


228

Jak uzyskać ostatni segment adresu URL? Mam następujący skrypt, który wyświetla pełny adres URL klikniętego tagu kotwicy:

$(".tag_name_goes_here").live('click', function(event)
{
    event.preventDefault();  
    alert($(this).attr("href"));
});

Jeśli adres URL to

http://mywebsite/folder/file

w jaki sposób mogę tylko wyświetlać część adresu URL pliku w polu alertu?


Poniżej znajduje się moje działające rozwiązanie skryptu Java. Mam nadzieję, że to pomaga. stackoverflow.com/a/38370175/610951
— Ravi Shankar Kota,

Odpowiedzi:


369

Możesz także użyć funkcji lastIndexOf (), aby zlokalizować ostatnie wystąpienie /znaku w adresie URL, a następnie funkcji substring (), aby zwrócić podciąg zaczynający się od tej lokalizacji:

console.log(this.href.substring(this.href.lastIndexOf('/') + 1));

W ten sposób unikniesz tworzenia tablicy zawierającej wszystkie segmenty adresów URL split().


3
@oshirowanen, nie, ale utworzy element tablicy z każdego segmentu adresu URL. Ponieważ interesuje Cię tylko ostatni segment, przydzielanie wielu elementów tablicy, których nigdy nie będziesz używać, może być marnotrawstwem.
— Frédéric Hamidi

11
Ale jeśli adres URL stał się podobny admin/store/tour/-1/, to będzie ''ciąg znaków?
— Ustaw Kyar Wa Lar

1
@Ustaw, może milszy, na pewno wolniej.
— Frédéric Hamidi,

1
co jeśli adres URL zawiera /na końcu?
— Sнаđошƒаӽ

6
Do wiadomości: @Set Kyar Wa Lar Aug i @ Sнаđошƒаӽ Rozwiązanie dla adresu URL zawierającego /na końcu:var url = window.location.href.replace(/\/$/, ''); /* remove optional end / */ var lastSeg = url.substr(url.lastIndexOf('/') + 1);
— Ross

151

var parts = 'http://mywebsite/folder/file'.split('/');
var lastSegment = parts.pop() || parts.pop();  // handle potential trailing slash

console.log(lastSegment);


Czy możesz mi wyjaśnić, jak to działa? zgodnie z moją wiedzą .pop () użyty do usunięcia ostatniego elementu tablicy. ale jest tutaj, pokazał ostatni element mojego adresu URL !!
— Zainspiruj Shahin,

1
Split przekształci Twój adres URL w tablicę, biorąc każdą sekcję adresu URL ograniczoną przez „/”. Dlatego ostatni segment jest ostatnim elementem zarówno adresu URL, jak i później utworzonej tablicy.
— stephen

10
To nie zadziała, jeśli adres URL kończy się na „/”, tj.http://mywebsite/folder/file/
— Peter Ludlow,

@PeterLudlow to działa w Chrome 76, proszę, rozwinąć
— zyrup

1
@PeterLudlow to działa, ponieważ pusty ciąg jest fałszywy w streszczeniu JS, "" == falsew takim przypadku wyskakuje część tablicy z pustym ciągiem
— zyrup

86
window.location.pathname.split("/").pop()

2
proste i łatwe. Dzięki.
— krezaeim

3
Idealnie i schludnie, świetnie
— Babak Habibi,

1
Piękna i czysta odpowiedź
— Zarkys Salas

1
Właśnie tego szukałem. Używając Reaguj-router-dom, było to najczystsze rozwiązanie, jakie znalazłem, aby znaleźć ostatnią część adresu URL za ostatnim ukośnikiem /. console.log(history.location.pathname.split("/").pop()) Jeśli istnieje lepszy sposób, chciałbym wiedzieć! Mam nadzieję, że ten komentarz może zachęcić więcej osób do odpowiedzi. Dzięki @ Dblock247
— Tralawar

Sidenote: To nie działa, jeśli adres URL ma ustawione parametry zapytania (np .../file?var=value&foo=bar.). To rozwiązanie rozwiązuje ten problem w bardziej niezawodny i nowoczesny sposób: stackoverflow.com/a/51795122/1123743
— Sebastian Barth

30

Kolejne rozwiązanie z regex.

var href = location.href;
console.log(href.match(/([^\/]*)\/*$/)[1]);

Podoba mi się Dzięki :).
— Salil Sharma

18

JavaScript ma funkcję podziału skojarzoną z obiektem łańcuchowym, która może ci pomóc:

var url = "http://mywebsite/folder/file";
var array = url.split('/');

var lastsegment = array[array.length-1];

17

Inne odpowiedzi mogą działać, jeśli ścieżka jest prosta i składa się tylko z prostych elementów ścieżki. Ale kiedy zawiera również parametry zapytania, łamią się.

Lepiej użyj do tego celu obiektu URL, aby uzyskać bardziej niezawodne rozwiązanie. Jest to parsowana interpretacja obecnego adresu URL:

Wejście: const href = 'https://stackoverflow.com/boo?q=foo&s=bar'

const segments = new URL(href).pathname.split('/');
const last = segments.pop() || segments.pop(); // Handle potential trailing slash
console.log(last);

Wynik: 'boo'

Działa to we wszystkich popularnych przeglądarkach. Tylko nasza umierająca IE nie obsługuje tego (i nie będzie). W przypadku IE dostępne są jednak wieloskładniki (jeśli w ogóle Ci zależy ).



8
var urlChunks = 'mywebsite/folder/file'.split('/');
alert(urlChunks[urlChunks.length - 1]);

5

Wiem, że jest już za późno, ale dla innych: zdecydowanie polecam użycie wtyczki jquery PURL . Motywacją dla PURL jest to, że adres URL można również segmentować według „#” (przykład: linki angular.js), tzn. URL może wyglądać

    http://test.com/#/about/us/

lub

    http://test.com/#sky=blue&grass=green

Dzięki PURL możesz łatwo zdecydować (segment / fsegment), który segment chcesz uzyskać.

Dla „klasycznego” ostatniego segmentu możesz napisać:

    var url = $.url('http://test.com/dir/index.html?key=value');
    var lastSegment = url.segment().pop(); // index.html

4

Opierając się na odpowiedzi Frédérica używając tylko javascript:

var url = document.URL

window.alert(url.substr(url.lastIndexOf('/') + 1));

3

Również,

var url = $(this).attr("href");
var part = url.substring(url.lastIndexOf('/') + 1);

3

Jeśli nie martwisz się generowaniem dodatkowych elementów za pomocą podziału, filtr może rozwiązać problem, o którym wspomniałeś o ukośniku końcowym (Zakładając, że masz obsługę filtra dla przeglądarki).

url.split('/').filter(function (s) { return !!s }).pop()

3
// Store original location in loc like: http://test.com/one/ (ending slash)
var loc = location.href; 
// If the last char is a slash trim it, otherwise return the original loc
loc = loc.lastIndexOf('/') == (loc.length -1) ? loc.substr(0,loc.length-1) : loc.substr(0,loc.lastIndexOf('/'));
var targetValue = loc.substr(loc.lastIndexOf('/') + 1);

targetValue = jeden

Jeśli Twój adres URL wygląda następująco:

http://test.com/one/

lub

http://test.com/one

lub

http://test.com/one/index.htm

Następnie loc wygląda tak: http://test.com/one

Teraz, ponieważ chcesz ostatni element, uruchom następny krok, aby załadować wartość (targetValue), którą pierwotnie chciałeś.

var targetValue = loc.substr(loc.lastIndexOf('/') + 1);

Prawdopodobnie coś mi umknęło, ale dzięki „ test.com/one ” loc wygląda tak: „ test.com ”. Myślę, że powinno być tak: if (loc.lastIndexOf ('/') == (loc.length -1)) {loc = loc.substr (0, loc.length-1)} else {var isFile = loc. substr (loc.lastIndexOf ('/'), loc.length) .indexOf ('.')! = -1; if (isFile) loc = loc.substr (0, loc.lastIndexOf ('/')); }
— Allan Raquin,

Nie powiedzie się, jeśli ukośnik w searchlub hash.
— Walf

3
window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1));

Użyj pathnamewłaściwości macierzystej, ponieważ jest ona najprostsza i została już przeanalizowana i rozwiązana przez przeglądarkę. $(this).attr("href")może zwracać wartości, ../..które nie dawałyby poprawnego wyniku.

Jeśli chcesz zachować searchi hash(np. foo?bar#bazPrzed http://quux.com/path/to/foo?bar#baz) użyj tego:

window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1) + this.search + this.hash);

Chcę również dodać, że pathnameusuwa parametry zapytania, ale hrefnie.
— Max Heiber

3

Aby uzyskać ostatni segment bieżącego okna:

window.location.href.substr(window.location.href.lastIndexOf('/') +1)


3

możesz najpierw usunąć, jeśli jest / na końcu, a następnie pobrać ostatnią część adresu URL

let locationLastPart = window.location.pathname
if (locationLastPart.substring(locationLastPart.length-1) == "/") {
  locationLastPart = locationLastPart.substring(0, locationLastPart.length-1);
}
locationLastPart = locationLastPart.substr(locationLastPart.lastIndexOf('/') + 1);

3

Zwraca ostatni segment, niezależnie od końcowych ukośników:

var val = 'http://mywebsite/folder/file//'.split('/').filter(Boolean).pop();

console.log(val);


Prawdopodobnie chcesz użyć path.sepnie dosłownego ukośnika. Zobacz nodejs.org/api/path.html#path_path_sep . Dzięki temu Twój kod będzie przenośny w różnych systemach operacyjnych.
— Aaron

1
Fajny pomysł, ale nie działałby już w przeglądarce
— John Doherty

Słuszna uwaga. Powinienem powiedzieć, że jest to preferowane w skryptach wiersza poleceń / nodejs po stronie serwera.
— Aaron


1

Zaktualizowana odpowiedź raddevus:

var loc = window.location.href;
loc = loc.lastIndexOf('/') == loc.length - 1 ? loc.substr(0, loc.length - 1) : loc.substr(0, loc.length + 1);
var targetValue = loc.substr(loc.lastIndexOf('/') + 1);

Wyświetla ostatnią ścieżkę adresu URL jako ciąg znaków:

test.com/path-name = path-name

test.com/path-name/ = path-name

0

Uważam, że bezpieczniej jest usunąć ukośnik ('/') przed wykonaniem podciągów. Ponieważ w moim scenariuszu mam pusty ciąg.

window.alert((window.location.pathname).replace(/\/$/, "").substr((window.location.pathname.replace(/\/$/, "")).lastIndexOf('/') + 1));

0

Używam wyrażeń regularnych i dzielenia:

var last_path = location.href.match (/. / (. [\ w]) /) [1] .split ("#") [0] .split ("?") [0]

W końcu zignoruje #? i / / końcowe adresy URL, co się często zdarza. Przykład:

https://cardsrealm.com/profile/cardsRealm -> Zwraca kartyRealm

https://cardsrealm.com/profile/cardsRealm#hello -> Zwraca kartyRealm

https://cardsrealm.com/profile/cardsRealm?hello -> Zwraca kartyRealm

https://cardsrealm.com/profile/cardsRealm/ -> Zwraca kartyRealm


0

Naprawdę nie wiem, czy wyrażenie regularne jest właściwym sposobem rozwiązania tego problemu, ponieważ może naprawdę wpłynąć na wydajność Twojego kodu, ale poniższe wyrażenie pomoże ci pobrać ostatni segment i nadal da ci ostatni segment, nawet jeśli adres URL następuje pusta /. Wyrażenie, które wymyśliłem to:

[^\/]+[\/]?$

0
// https://x.com/boo/?q=foo&s=bar = boo
// https://x.com/boo?q=foo&s=bar = boo
// https://x.com/boo/ = boo
// https://x.com/boo = boo

const segment = new 
URL(window.location.href).pathname.split('/').filter(Boolean).pop();
console.log(segment);

Pracuje dla mnie.


0

Wiem, że jest stary, ale jeśli chcesz uzyskać go z adresu URL, możesz po prostu użyć:

document.location.pathname.substring(document.location.pathname.lastIndexOf('/.') + 1);

document.location.pathnamepobiera nazwę ścieżki z bieżącego adresu URL. lastIndexOfpobierz indeks ostatniego wystąpienia następującego Regex, w naszym przypadku jest /.. Kropka oznacza dowolny znak, dlatego nie będzie się liczyć, jeśli /będzie to ostatni znak w adresie URL. substringprzetnie łańcuch między dwoma indeksami.


0

jeśli adres URL jest http://localhost/madukaonline/shop.php?shop=79

console.log(location.search); przyniesie ?shop=79

więc najprostszym sposobem jest użycie location.search

możesz znaleźć więcej informacji tutaj i tutaj


0

Możesz to zrobić za pomocą prostych zapytań o ścieżki (w / 0) itp.

Przyznane prawdopodobnie zbyt skomplikowane i prawdopodobnie mało wydajne, ale chciałem wykorzystać to reducedla zabawy.

  "/foo/bar/"
    .split(path.sep)
    .filter(x => x !== "")
    .reduce((_, part, i, arr) => {
      if (i == arr.length - 1) return part;
    }, "");
  1. Podziel ciąg na separatory ścieżek.
  2. Odfiltruj puste części ścieżki ciągu (może się to zdarzyć z końcowym ukośnikiem na ścieżce).
  3. Zmniejsz tablicę części ścieżki do ostatniej.
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.