Segmen terakhir dari URL

228

Bagaimana cara mendapatkan segmen terakhir dari url? Saya memiliki skrip berikut yang menampilkan url lengkap dari tag jangkar yang diklik:

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

Jika urlnya

http://mywebsite/folder/file

bagaimana cara membuatnya hanya untuk menampilkan bagian "file" dari url di kotak peringatan?

oshirowanen
sumber
Di bawah ini adalah solusi java script saya. Semoga bisa membantu. stackoverflow.com/a/38370175/610951
Ravi Shankar Kota

Jawaban:

369

Anda juga dapat menggunakan fungsi lastIndexOf () untuk menemukan kemunculan /karakter terakhir di URL Anda, lalu fungsi substring () untuk mengembalikan substring mulai dari lokasi itu:

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

Dengan begitu, Anda akan menghindari membuat array yang berisi semua segmen URL Anda, seperti split()halnya.

Frédéric Hamidi
sumber
3
@oshirowanen, tidak, tapi itu akan membuat elemen array dari setiap segmen URL. Karena Anda hanya tertarik pada segmen terakhir, mungkin akan sia-sia untuk mengalokasikan banyak elemen array yang tidak akan pernah Anda gunakan.
Frédéric Hamidi
11
Tetapi jika url itu menjadi seperti admin/store/tour/-1/itu akan menjadi ''string?
Atur Kyar Wa Lar
1
@Set, lebih baik mungkin, pasti lebih lambat.
Frédéric Hamidi
1
bagaimana jika url berisi /di bagian akhir?
Sнаđошƒаӽ
6
Attn: @Set Kyar Wa Lar Aug dan @ Sнаđошƒаӽ Solusi untuk url yang berisi a /di akhir: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
sumber
Bisakah Anda jelaskan bagaimana cara kerjanya? sesuai pengetahuan saya .pop () digunakan untuk menghapus elemen terakhir dari sebuah array. tetapi di sini ia menunjukkan elemen terakhir dari url saya !!
Inspire Shahin
1
Split akan mengonversi url Anda menjadi array yang mengambil setiap bagian dari url yang dibatasi oleh '/'. Karenanya segmen terakhir adalah elemen terakhir dari url dan array yang dibuat selanjutnya.
stephen
10
Ini tidak akan berfungsi jika url diakhiri dengan tanda "/"http://mywebsite/folder/file/
Peter Ludlow
@PeterLudlow berfungsi di Chrome 76, bisakah Anda jelaskan
zyrup
1
@PeterLudlow berfungsi karena string kosong salah dalam abstrak JS "" == falsedalam kasus itu muncul bagian dari array dengan string kosong
zyrup
86
window.location.pathname.split("/").pop()
Dblock247
sumber
2
sederhana dan mudah. Terima kasih.
krezaeim
3
Sempurna dan rapi, bagus
Babak Habibi
1
Respons yang indah dan bersih
Zarkys Salas
1
Ini persis apa yang saya cari. Menggunakan react-router-dom ini adalah solusi terbersih yang saya temukan untuk menemukan bagian terakhir dari URL yang mengikuti garis miring terakhir /. console.log(history.location.pathname.split("/").pop()) Jika ada cara yang lebih baik, saya ingin tahu! Semoga komentar ini dapat mengarahkan lebih banyak orang ke jawaban Anda. Terima kasih @ Dblock247
Tralawar
Sidenote: Ini tidak berfungsi jika URL memiliki params kueri yang ditetapkan di atasnya (mis .../file?var=value&foo=bar.). Solusi ini menyelesaikan masalah ini dengan cara yang lebih kuat dan modern: stackoverflow.com/a/51795122/1123743
Sebastian Barth
30

Hanya solusi lain dengan regex.

var href = location.href;
console.log(href.match(/([^\/]*)\/*$/)[1]);
Avirtum
sumber
Saya menyukainya Terima kasih :).
Salil Sharma
18

Javascript memiliki pemisahan fungsi yang terkait dengan objek string yang dapat membantu Anda:

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

var lastsegment = array[array.length-1];
Fran Verona
sumber
17

Jawaban lain mungkin berfungsi jika jalurnya sederhana, hanya terdiri dari elemen jalur sederhana. Tetapi ketika itu berisi params permintaan juga, mereka pecah.

Lebih baik gunakan objek URL untuk ini daripada mendapatkan solusi yang lebih kuat. Ini adalah interpretasi parsing dari URL ini:

Memasukkan: 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);

Keluaran: 'boo'

Ini berfungsi untuk semua browser umum. Hanya IE yang sekarat kami tidak mendukung itu (dan tidak akan). Untuk IE ada polyfill yang tersedia, (jika Anda peduli sama sekali).

Sebastian Barth
sumber
10

Atau Anda dapat menggunakan ekspresi reguler:

alert(href.replace(/.*\//, ''));
jasssonpet
sumber
lebih baik lagi, gabungkan ini dengan stackoverflow.com/questions/4758103/… :alert(window.location.href.replace(/\/$/, '').replace(/.*//, ''))
samson
8
var urlChunks = 'mywebsite/folder/file'.split('/');
alert(urlChunks[urlChunks.length - 1]);
puncak
sumber
5

Saya tahu, ini sudah terlambat, tetapi untuk yang lain: Saya sangat merekomendasikan menggunakan plugin PURL jquery . Motivasi untuk PURL adalah bahwa url dapat disegmentasi oleh '#' juga (contoh: tautan angular.js), yaitu url dapat terlihat seperti

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

atau

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

Dan dengan PURL Anda dapat dengan mudah memutuskan (segmen / fsegment) segmen mana yang ingin Anda dapatkan.

Untuk segmen terakhir "klasik", Anda dapat menulis:

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

Membangun jawaban Frédéric hanya menggunakan javascript:

var url = document.URL

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

Juga,

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

Jika Anda tidak khawatir tentang menghasilkan elemen tambahan menggunakan split maka filter dapat menangani masalah yang Anda sebutkan tentang trailing slash (Dengan anggapan Anda memiliki dukungan browser untuk filter).

url.split('/').filter(function (s) { return !!s }).pop()
Jaboc83
sumber
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 = satu

Jika url Anda terlihat seperti:

http://test.com/one/

atau

http://test.com/one

atau

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

Kemudian loc akhirnya tampak seperti: http://test.com/one

Sekarang, karena Anda menginginkan item terakhir, jalankan langkah berikutnya untuk memuat nilai (targetValue) yang Anda inginkan semula.

var targetValue = loc.substr(loc.lastIndexOf('/') + 1);
raddevus
sumber
Saya mungkin melewatkan sesuatu, tetapi dengan " test.com/one " loc akhirnya tampak seperti: " test.com ". Saya pikir itu harus seperti: 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
Gagal jika memotong searchatau hash.
Walf
3
window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1));

Gunakan pathnameproperti asli karena ini paling sederhana dan telah diuraikan dan diselesaikan oleh browser. $(this).attr("href")dapat mengembalikan nilai seperti ../..yang tidak akan memberi Anda hasil yang benar.

Jika Anda perlu menyimpan searchdan hash(misalnya foo?bar#bazdari http://quux.com/path/to/foo?bar#baz) gunakan ini:

window.alert(this.pathname.substr(this.pathname.lastIndexOf('/') + 1) + this.search + this.hash);
Walf
sumber
Juga ingin menambahkan pathnameparameter kueri strip, tetapi hreftidak.
Max Heiber
3

Untuk mendapatkan segmen terakhir dari jendela Anda saat ini:

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

RegarBoy
sumber
3

Anda dapat menghapus terlebih dahulu jika ada / di akhir dan kemudian mendapatkan bagian terakhir dari 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
sumber
3

Mengembalikan segmen terakhir, terlepas dari garis miring:

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

console.log(val);

John Doherty
sumber
Anda mungkin ingin menggunakan path.sepbukan garis miring. Lihat nodejs.org/api/path.html#path_path_sep . Ini akan membuat kode Anda portabel di seluruh OS.
Aaron
1
Ide yang bagus, tetapi tidak lagi berfungsi di browser
John Doherty
Poin yang bagus. Saya harus mengatakan bahwa ini lebih disukai di skrip baris perintah / nodejs sisi-server.
Harun
2
var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

Disalin dari jawaban ini

Roberto Alonso
sumber
1

Jawaban raddevus yang diperbarui:

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

Mencetak jalur terakhir url sebagai string:

test.com/path-name = path-name

test.com/path-name/ = path-name
Nemanja Smiljanic
sumber
0

Saya percaya lebih aman untuk menghapus garis miring ('/') sebelum melakukan substring. Karena saya mendapat string kosong dalam skenario saya.

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

Saya menggunakan regex dan split:

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

Pada akhirnya itu akan mengabaikan #? & / url akhir, yang sering terjadi. Contoh:

https://cardsrealm.com/profile/cardsRealm -> Mengembalikan cardsRealm

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

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

https://cardsrealm.com/profile/cardsRealm/ -> Mengembalikan cardsRealm

Dinidiniz
sumber
0

Saya tidak benar-benar tahu apakah regex adalah cara yang tepat untuk menyelesaikan masalah ini karena itu benar-benar dapat mempengaruhi efisiensi kode Anda, tetapi regex di bawah ini akan membantu Anda mengambil segmen terakhir dan masih akan memberi Anda segmen terakhir bahkan jika URL diikuti oleh yang kosong /. Regex yang saya buat adalah:

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

sumber
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);

Bekerja untukku.

sanyaissues
sumber
0

Saya tahu ini sudah lama tetapi jika Anda ingin mendapatkan ini dari URL, Anda cukup menggunakan:

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

document.location.pathnamemendapatkan pathname dari URL saat ini. lastIndexOfdapatkan indeks kejadian terakhir dari Regex berikut, dalam kasus kami adalah /.. Titik berarti karakter apa pun, jadi, tidak akan dihitung jika /karakter terakhir pada URL. substringakan memotong string antara dua indeks.

Ruan Carlos
sumber
0

jika urlnya http://localhost/madukaonline/shop.php?shop=79

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

jadi cara paling sederhana adalah dengan menggunakan location.search

Anda dapat mencari info lebih lanjut di sini dan di sini

Dijiflex
sumber
0

Anda dapat melakukannya dengan jalur sederhana (w / 0) querystrings dll.

Memang mungkin terlalu rumit dan mungkin tidak performan, tapi saya ingin menggunakannya reduceuntuk bersenang-senang.

  "/foo/bar/"
    .split(path.sep)
    .filter(x => x !== "")
    .reduce((_, part, i, arr) => {
      if (i == arr.length - 1) return part;
    }, "");
  1. Pisahkan string pada pemisah jalur.
  2. Memfilter bagian jalur string kosong (ini bisa terjadi dengan trailing slash in path).
  3. Kurangi larik bagian-bagian jalur ke yang terakhir.
Harun
sumber