How to extract end of URL in Javascript?

Question

I have URLs in the form:

serverName/app/image/thumbnail/2012/4/23/1335228884300/bb65efd50ade4b3591dcf7f4c693042b

Where serverName is the domain name of the server.

I would like to write a JS function that accepts one of these URLs and returns the very last (right-most) forward-slash-delimited string. So if the URL above was passed into the function, it would return "bb65efd50ade4b3591dcf7f4c693042b";.

function getImageDirectoryByFullURL(url) {
    // ... Not sure how to define regexp to delimit on forward slashes,
    // or how to start searching from end of string.
}

Joseph · Accepted Answer · 2012-04-24 01:52:02Z

16

split by slashes /, pop off the last and return it

function getImageDirectoryByFullURL(url){
    return url.split('/').pop()
}

//a step by step breakdown
function getImageDirectoryByFullURL(url){
    url = url.split('/'); //url = ["serverName","app",...,"bb65efd50ade4b3591dcf7f4c693042b"]
    url = url.pop();      //url = "bb65efd50ade4b3591dcf7f4c693042b"
    return url;           //return "bb65efd50ade4b3591dcf7f4c693042b"
}

what this does is split the url per / and returns an array of values in between, but not including, the slashes. then, since what's returned by split() is an array, we can use pop() to pop off the last item and return it.

edited Apr 24, 2012 at 1:52

answered Apr 24, 2012 at 0:59

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Interrobang Over a year ago

Good example of doing OP wants, not what he thinks he wants :P

IAmYourFaja Over a year ago

How would I pop off that last index in the returned array?

Joseph Over a year ago

@AdamTannon split() returns an array which pop() can use. pop() returns the last item in the array provided by split(), and thus is what's returned by the whole function.

Elliot Bonneville · Accepted Answer · 2012-04-24 01:19:48Z

6

In this case, substr() might be faster than split(). Not 100% sure.

function getImageDirectoryByFullURL(url){
    return url.substr(url.lastIndexOf("/")+1);
}

Edit: I forgot, you don't need to include the extra length parameter. Without passing that in you just get a substr to the end of the string, which is what is desired. While this solution is admittedly a little uglier than Joseph's answer, it is twice as fast in Chrome and something like fives times as fast in Firefox.

edited Apr 24, 2012 at 1:19

answered Apr 24, 2012 at 1:01

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

5 Comments

Sasha Chedygov Over a year ago

I doubt the speed difference is large enough to matter. Your solution and the one proposed by Joseph are both valid (though I personally prefer his because it's shorter and more succinct).

Elliot Bonneville Over a year ago

Yep. Just thought I'd propose a different method of doing it, because... well, just because. =]

ajax333221 Over a year ago

+1, great alternative, just add a +1 here lastIndexOf("/")+1 to remove the first /

ajax333221 Over a year ago

amazingly, this is way much faster that the pop solution jsperf.com/popvslastindex

Elliot Bonneville Over a year ago

@ajax333221: Wow, thanks for the test. I suspected it would be faster; just didn't know how much faster. I'm betting it's because with the split() solution you have the overhead of creating the array and then calling the pop() function on it, whereas str.substr() just immediately returns the requested string.

jfriend00 · Accepted Answer · 2012-04-24 01:50:58Z

3

To make it a little more robust and allow for the possible presence of a trailing slash, hash tags or query parameters on the URL:

function getImageDirectoryByFullURL(url){
    url = url.replace(/#[^#]+$/, "").replace(/\?[^\?]+$/, "").replace(/\/$/, "");
    return url.substr(url.lastIndexOf("/") + 1);
}

And a working demo with a bunch of test cases: http://jsfiddle.net/jfriend00/akVVf/

edited Apr 24, 2012 at 1:50

answered Apr 24, 2012 at 1:37

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

RobG Over a year ago

@ElliotBonneville— +1 for the ridiculous +1. ;-)

jfriend00 Over a year ago

I'm not sure why you think the regexes are ridiculous. /#[^#]+$/ matches from the last # to the end of the string. Same for /\?[^\?]+$/ with a ?.

RobG · Accepted Answer · 2012-04-24 04:02:08Z

1

Since there are no sensible regular expression versions, consider:

return url.replace(/^.*\//,'');

answered Apr 24, 2012 at 4:02

RobG

148k32 gold badges180 silver badges216 bronze badges

2 Comments

jfriend00 Over a year ago

Better hope the URL doesn't have a trailing slash on it.

RobG Over a year ago

The OP can sort that, the requirement was "…the very last (right-most) forward-slash-delimited string".

Nudier Mena · Accepted Answer · 2012-04-24 01:15:49Z

0

Also you can try something like this, getting the same result.

function getImageUrl( url){
    var result = url.substring(url.lastIndexOf("/") + 1);
    return result;
}

edited Apr 24, 2012 at 1:15

answered Apr 24, 2012 at 1:10

Nudier Mena

3,2842 gold badges25 silver badges22 bronze badges

1 Comment

Elliot Bonneville Over a year ago

See my answer; also keep in mind that Javascript functions are case-sensitive (LastIndexOf should be lastIndexOf), and you'll want lastIndexOf("/") + 1 to avoid including the extra "/" at the beginning of the string.

Collectives™ on Stack Overflow

How to extract end of URL in Javascript?

5 Answers 5

3 Comments

5 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

5 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related