Pekka
Pekka

Reputation: 449385

Find base name in URL in Javascript

I want to extract the base name from a image URL in Javascript. Would somebody care to give me a a hand on the Regex?

The rule would be:

I have a clumsy /\/[^.]+\.[^.]+$/ but don't know how to make the / and the . optional and how to seek for the last . only.

Cheers folks for all the great input, as always. I chose the one Regex that worked for me out of the box.

Upvotes: 17

Views: 16648

Answers (6)

Christophe Marois
Christophe Marois

Reputation: 6719

When you have access to a DOM, you can use the native HTMLHyperlinkElementUtils properties of an <a> tag:

function urlInfo (url) {

  var props = 'hash host hostname href origin password pathname port protocol username search';

  if (!window.urlInfoAnchorElement)
    window.urlInfoAnchorElement = document.createElement('a');

  urlInfoAnchorElement.href = url;

  return props.split(' ').reduce(function (m, v, i) {
    m[v] = urlInfoAnchorElement[v]; return m;
  }, {});

}

// Example:
urlInfo('http://localhost:4000/guidelines/7yQxvndK?get=sup&love=1#oiwjef');

/* => {
  hash: "#oiwjef"
  host: "localhost:4000"
  hostname: "localhost"
  href: "http://localhost:4000/guidelines/7yQxvndK?get=sup&love=1#oiwjef"
  origin: "http://localhost:4000"
  password: ""
  pathname: "/guidelines/7yQxvndK"
  port: "4000"
  protocol: "http:"
  search: "?get=sup&love=1"
} */

Upvotes: 0

WRFan
WRFan

Reputation: 11

I recommend using the FileSystemObject activex. Sure, you need to mark it as safe in the registry to execute it without nag screens, but it' very useful. Your call... GetBaseName function does what you want.

Upvotes: -2

Christoph
Christoph

Reputation: 169543

Yet another solution:

url.replace(/^.*\/|\.[^.]*$/g, '')

Upvotes: 30

Mirko N.
Mirko N.

Reputation: 10567

I wouldn't actually use a regex in this case, but simply lastIndexOf and substring. Something like

function findBaseName(url) {
    var fileName = url.substring(url.lastIndexOf('/') + 1);
    var dot = fileName.lastIndexOf('.');
    return dot == -1 ? fileName : fileName.substring(0, dot);
}

Upvotes: 12

Tim Pietzcker
Tim Pietzcker

Reputation: 336108

In your examples, assuming that the input string is the entire URL and nothing more, I've had success with

/\/[^\/]+(?=\.[^.]+$)|\/[^\/]+$/

This first tries to match everything from the last / until the last .; if there is no dot, it will then try to match everything from the last / until the end of the string.

The leading / is contained in the match (JavaScript doesn't support lookbehind, else I could have used that), so you'll need to chop off the first character of the match.

Upvotes: 1

Gumbo
Gumbo

Reputation: 655169

Try this regular expression:

/([^/]+(?=\.[^/.]*$)|[^/.]+$)/

Upvotes: 1

Related Questions