How to get the directory part of current URL in JavaScript?

Question

I'm trying to add a "back to dir" button at the top of a web page, which would redirect the user to the same URL, but with no filename in it.

For example, clicking that button while viewing the URL

http://example.com/somedir/button.html

would redirect you to the

http://example.com/somedir/

So I've created the following code:

<html>
<body>

<input type="button"
value="back to dir"
onclick="top.location=document.URL.replace(/[^\\]*$/, '')">

</body>
</html>

but I'm missing the correct code, which would shave away the filename from the current URL in document.URL

Does anybody have a good idea here please?

Here is the JSFiddle link: http://jsfiddle.net/afarber/PERBY/

And I'd prefer not to use jQuery this one time.

daedalus · Accepted Answer · 2014-12-06 13:20:23Z

33

Try this document.URL.substr(0,document.URL.lastIndexOf('/'))

It will work for sure!

edited Dec 6, 2014 at 13:20

daedalus

10.9k5 gold badges52 silver badges71 bronze badges

answered Jun 7, 2013 at 13:13

Abdul Rauf

9822 gold badges10 silver badges22 bronze badges

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

3 Comments

Alexander Farber Over a year ago

Thanks, this looks good - event better than my regex (where I made a typo...)

Abdul Rauf Over a year ago

You are welcome, vote it up if it works good, so that other people can get benefit from it.

Derek Henderson Over a year ago

This doesn't work if the current url ends in a trailing slash, as it so often does.

jbyrd · Accepted Answer · 2016-11-18 15:22:40Z

4

This one-liner also works:

document.URL.split('/').slice(0, -1).join('/')

answered Nov 18, 2016 at 15:22

jbyrd

5,6459 gold badges58 silver badges95 bronze badges

1 Comment

frank-dspeed Over a year ago

While this method works it is much slower then the string solution posted by @abdul-rauf

zmag · Accepted Answer · 2019-11-26 07:52:41Z

4

console.log(new URL(document.URL));

you would get all object like this :

{
  href:"https://yy.xx.id/index.php/5351/user/private/images%20%282%29.jpeg?forcedownload=1",

  origin:"https://smi.kerjaindonesia.id", 
  protocol: "https:", 
  username: "", 
  password: "", 
  pathname: "index.php/5351/user/private/images%20%282%29.jpeg"  ,
  port: "" ,
  protocol: "https:",
  search: "?forcedownload=1"
}

edited Nov 26, 2019 at 7:52

zmag

8,27112 gold badges39 silver badges47 bronze badges

answered Nov 26, 2019 at 7:34

robby dwi hartanto

4351 gold badge4 silver badges10 bronze badges

1 Comment

Reza Alizade Over a year ago

Best solution and not hacky! You could also access these parameters and some extra ones from window.location, such as window.location.hostname

Hilson Shrestha · Accepted Answer · 2013-06-07 13:22:33Z

1

/* to avoid query parameters, use pathname instead of href */
var l = document.location.pathname.split('/');
l.pop();
console.log(document.location.origin + l.join('/'));

answered Jun 7, 2013 at 13:22

Hilson Shrestha

192 bronze badges

1 Comment

Teemu Over a year ago

FYI: document.location is deprecated, use window.location instead.

Brett Zamir · Accepted Answer · 2017-12-18 00:54:58Z

1

The following gets directories, including the case where the last character is a slash.

document.URL.replace(/\/[^/]+\/?$/, '');

This effectively states the following (assuming they can be found in this order)

\/: Find a "/"
[^/]+: Find one or more characters after it that are not "/"
\/?: Find an optional "/" after those character(s)
$: Find the end of the string

Then remove these by '', so we're left with the directory only.

Again, this assumes there is a slash present marking a directory and that this is not just a URL where the only slashes are within http://.

answered Dec 18, 2017 at 0:54

Brett Zamir

14.4k7 gold badges57 silver badges85 bronze badges

1 Comment

Robin Stewart Over a year ago

I modified this to keep any path component with a trailing slash (so a URL that's already a directory stays unchanged): window.location.href.replace(/\/[^/]+$/, '/')

Derek Henderson · Accepted Answer · 2013-06-07 13:28:46Z

0

Try the following, which takes into account both when the URL ends in a trailing slash and when it doesn't:

var currUrl = document.URL,
    newUrl;
if (currUrl.charAt(currUrl.length - 1) === '/') {
    newUrl = currUrl.slice(0, currUrl.lastIndexOf('/'));
    newUrl = newUrl.slice(0, newUrl.lastIndexOf('/')) + '/';
} else {
    newUrl = currUrl.slice(0, currUrl.lastIndexOf('/')) + '/';
}
console.log(newUrl);

answered Jun 7, 2013 at 13:28

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

Comments

Marcin Olawski · Accepted Answer · 2025-03-31 19:59:24Z

0

This simple and elegant solution avoids using any join(), split(), or other "magic":

let url = new URL("http://example.com/somedir/button.html");
url = new URL(".", url);
console.log(url.href); // http://example.com/somedir/

When you pass "." as the first argument to the URL constructor, it effectively resolves it as the "current directory" of the given URL. This removes any filename or trailing path from the URL, leaving you with just the directory.

answered Mar 31 at 19:59

Marcin Olawski

1,0208 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to get the directory part of current URL in JavaScript?

7 Answers 7

3 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related