Categories
javascript jquery

Last segment of URL with JavaScript

290

How do I get the last segment of a url? I have the following script which displays the full url of the anchor tag clicked:

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

If the url is

http://mywebsite/folder/file

how do I only get it to display the “file” part of the url in the alert box?

1

  • Please, do not use a naive solution that splits the href by /. A URL has parts after the path: the search parameters (after ?), and the fragment (after #). If you have a URL as a string, use new URL( the string ).pathname first. If you’re looking for the URL of the current page, use location.pathname. Then use .split("/") on the result. .filter(Boolean) removes empty parts (e.g. after trailing slashes). .at(-1) (or .pop() or .slice(-1)[0]) gets the last part of the path.

    Mar 15 at 22:08

443

You can also use the lastIndexOf() function to locate the last occurrence of the / character in your URL, then the substring() function to return the substring starting from that location:

console.log(this.href.substring(this.href.lastIndexOf("https://stackoverflow.com/") + 1));

That way, you’ll avoid creating an array containing all your URL segments, as split() does.

18

  • 4

    @oshirowanen, no, but it will create an array element from each URL segment. Since you’re only interested in the last segment, it might be wasteful to allocate many array elements that you’ll never use.

    Jan 21, 2011 at 11:23

  • 22

    But if the url was become like admin/store/tour/-1/ so it’s will be '' string?

    Aug 20, 2014 at 8:39


  • 1

    @Set, nicer maybe, slower surely.

    Aug 20, 2014 at 8:58

  • 3

    what if the url contains a / at the end?

    Jul 25, 2016 at 14:07

  • 10

    Attn: @Set Kyar Wa Lar Aug and @Sнаđошƒаӽ Solution for url that contains a / at the end: var url = window.location.href.replace(/\/$/, ''); /* remove optional end / */ var lastSeg = url.substr(url.lastIndexOf('/') + 1);

    – Ross

    Nov 2, 2016 at 3:18


166

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

console.log(lastSegment);

3

  • Can you explain me how it work’s? as per my knowledge .pop() used for remove last element of a array. but is here it showed last element of my url!!

    Dec 15, 2015 at 7:33

  • 1

    Split will convert your url into an array taking each section of the url delimited by ‘/’. Hence the last segment is the last element of both the url and the subsequently created array.

    – stephen

    Feb 22, 2016 at 23:46

  • 4

    Sidenote: This does not work if the URL does have query params set on it (e.g. .../file?var=value&foo=bar). This solution solves this problem on a more robust and modern way: stackoverflow.com/a/51795122/1123743

    May 18, 2020 at 14:01


142

window.location.pathname.split("https://stackoverflow.com/").pop()

1

  • 1

    This is exactly what I was looking for. Using react-router-dom this was the cleanest solution I have found to find the last part of the URL trailing the last forward slash /. console.log(history.location.pathname.split("/").pop()) If there is a better way I would like to know! Hopefully this comment can lead more people to your answer. Thanks @Dblock247

    – tralawar

    Dec 26, 2019 at 21:48