17

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:

  • return everything right of the last / left of the last .

    www.domain.com/images/image.hires.jpg

  • if no . is found, return the full base name www.domain.com/images/image_hi_res

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.

1

6 Answers 6

30

Yet another solution:

url.replace(/^.*\/|\.[^.]*$/g, '')
Sign up to request clarification or add additional context in comments.

1 Comment

@themis just for the new tlds
12

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);
}

1 Comment

If you want the current url just use the function above like this: findBaseName(window.location.href);
1

Try this regular expression:

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

Comments

1

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.

Comments

0

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"
} */

Comments

-2

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.

1 Comment

This removes cross platform and cross browser compatibility for relatively little gain.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.