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?

oshirowanen
źródło
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().

Frédéric Hamidi
źródło
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);

Tim van Oostrom
źródło
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()
Dblock247
źródło
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]);
Avirtum
źródło
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];
Fran Verona
źródło
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 ).

Sebastian Barth
źródło
10

Lub możesz użyć wyrażenia regularnego:

alert(href.replace(/.*\//, ''));
jasssonpet
źródło
jeszcze lepiej, połącz to z stackoverflow.com/questions/4758103/… :alert(window.location.href.replace(/\/$/, '').replace(/.*//, ''))
samson
8
var urlChunks = 'mywebsite/folder/file'.split('/');
alert(urlChunks[urlChunks.length - 1]);
kulminacja
źródło
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
IL55
źródło
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));
Szczypta
źródło
3

Również,

var url = $(this).attr("href");
var part = url.substring(url.lastIndexOf('/') + 1);
naveen
źródło
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()
Jaboc83
źródło
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);
raddevus
źródło
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);
Walf
źródło
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)

RegarBoy
źródło
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);
Veysi YILDIZ
źródło
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);

John Doherty
źródło
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
2
var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

Skopiowano z tej odpowiedzi

Roberto Alonso
źródło
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
Nemanja Smiljanic
źródło
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));
Jaison
źródło
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

Dinidiniz
źródło
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:

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

źródło
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.

sanyaissues
źródło
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.

Ruan Carlos
źródło
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

Dijiflex
źródło
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.
Aaron
źródło