How to extract last directory and file name from URL in javascript?

Question

I need to extract the last subdirectory and the file name from an image like this (the subdirectory name is not consistent and the position of the ):

example.com/dw/image/v2/BFKH_PRD/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dw981dad25/Homepage/2021/11_NOV/1102/HPNAVTILES/1102_WGA_NAV_TILES_01_01.jpg?sw=40&q=100

I am using this js to pull out the file name, which works great, but I have no idea how to get the last subdirectory.

function() {
  var url = {{INSERT URL}};
  return url.substr(url.lastIndexOf('/')+1).split('?')[0];
}

Thanks a bunch!

Have a look at first using the URL object and then tapping into the pathname? — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Nov 5, 2021 at 21:28

BrownieInMotion · Accepted Answer · 2021-11-05 21:36:13Z

2

If your URL is guaranteed to be valid—and start with a protocol—I would try and do as little parsing myself as possible. Here's one solution:

url = 'https://example.com/dw/image/v2/BFKH_PRD/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dw981dad25/Homepage/2021/11_NOV/1102/HPNAVTILES/1102_WGA_NAV_TILES_01_01.jpg?sw=40&amp;q=100';

const lastDirectory = (url) => {
  const parsed = new URL(url);
  const path = parsed.pathname.split('/');
  return path.slice(-2).join('/');
};

console.log(lastDirectory(url));

By using JavaScript's URL(), we do not have to deal with removing the query string (or other parts of URLs) ourselves: we can easily extract the path and perform our operations on it.

Output:

HPNAVTILES/1102_WGA_NAV_TILES_01_01.jpg

answered Nov 5, 2021 at 21:36

BrownieInMotion

1,2229 silver badges11 bronze badges

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

Comments

Jimmy Soussan · Accepted Answer · 2021-11-05 21:32:55Z

1

You could get the last subdirectory like so

  function() {
      var url = {{INSERT URL}};
      directories = url.split("/")
      lastSubdirectory = directories[directories.length - 2]
      return lastSubdirectory
    }

answered Nov 5, 2021 at 21:32

Jimmy Soussan

7221 gold badge6 silver badges17 bronze badges

4 Comments

Francesco Over a year ago

You might also add add .split("?")[0] on the return statement to remove parameters

Jimmy Soussan Over a year ago

I'm not sure for me the last subdirectory is "HPNAVTILES" so there is no "?" after I guess

Steve Over a year ago

This worked great Jimmy - thanks so much!

Jimmy Soussan Over a year ago

I'm glad this help!

Collectives™ on Stack Overflow

How to extract last directory and file name from URL in javascript?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related