How to reliably get the filename without the suffix in javascript?

Question

Whats the reliable way on getting the filename of a file by removing suffix in javascript?

I have a file let's say :

http://example.com/uploads/images/a51dd42_thumb.jpg and http://example.com/uploads/images/a51dd42_s.jpg

Now i want to get the string http://example.com/uploads/images/a51dd42.jpg

replace() function is not what i want since images filename could have many different types of suffixes

Maybe regex is the best for this?

If yes, whats the reliable code for it?

Thanks in advance

Does it always have the `_` in there? So you want to get rid of what is inbetween the `_` and the `.` including the `_` istelf. — putvande, Aug 17 '14 at 16:31

T.J. Crowder · Accepted Answer · 2014-08-17T16:37:28.163

The replace function probably is what you want, and it can accept a regular expression as the search pattern:

url = url.replace(/_[^\/]+(\.[^\/]*)$/, "$1");

What that expression does: Example on Regex101

Looks for an _ that isn't followed by any slashes (so we're only looking at the final segment in the path).
Allows any number of non-slash characters after the _.
Stops matching those at the last . it finds followed by zero or more characters (I'm assuming these always have an extension on them); captures the . and the characters after it (e.g., the extension).
Replaces the overall match with just the . and extension following it. (The $1 in the replace string is special, it means "use the value of the first capture group.)

If your paths may or may not have an extension on them, just add a ? near the end of the regex, just before the $: /_[^\/]+(\.[^\/]*)?$/ (that makes everything in the capture group optional).

Example: Live Copy

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    body {
      font-family: monospace;
    }
  </style>
</head>
<body>
<script>
  (function() {
    "use strict";

    test("http://example.com/uploads/images/a51dd42_thumb.jpg");
    test("http://example.com/uploads/images/a51dd42_s.jpg");

    function test(url) {
      display("Before: " + url);
      url = url.replace(/_[^\/]+(\.[^\/]*)$/, "$1");
      display("After: " + url);
    }

    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

Thanks. Just what i need so im marking the answer as check. :) Just curious, what if i have two underscores like a51dd42_profile_thumb.jpg? i tested it in my local script but it replaces both _profile and _thumb — Bogz, Aug 17 '14 at 16:49
@MarkBonnieVestil: If you want that to end up being `a51dd42_profile.jpg`, we do the same thing we did to avoid matching within an earlier segment of the path: Exclude the `_` from the possible characters that can follow it (in both places, probably). So we end up with: `/_[^\/_]+(\.[^\/_]*)$/` (or `/_[^\/_]+(\.[^\/_]*)?$/` if the extension is optional). - http://jsbin.com/peqori/2 (That regex looks a bit angry, doesn't it? ;-D) — T.J. Crowder, Aug 17 '14 at 16:53

score 1 · Answer 2 · answered Aug 17 '14 at 16:33

1

You can use:

var s = 'http://example.com/uploads/images/a51dd42_thumb.jpg';
var r = s.replace(/^(.+?)_[^.]+(\.[^\/.]+)$/i, '$1$2');
//=> http://example.com/uploads/images/a51dd42.jpg

answered Aug 17 '14 at 16:33

anubhava

761,203
64
569
643

1

thanks. your code seems to be dependent in a extension like jpg. Is there a better way where it will adapt to any type of extension? – Bogz Aug 17 '14 at 16:35

score -1 · Answer 3 · answered Aug 17 '14 at 16:43

-1

Split it easy

var start = Filename.split('_')[0], 
file = Filename.split('_')[1],
end = file.split('.')[1];
console.log(start + '.' + end);

.

answered Aug 17 '14 at 16:43

user32342534

145
6

How to reliably get the filename without the suffix in javascript?

3 Answers3

Linked