如何从 JavaScript 中的字符串修剪文件扩展名？

Question

For example, assuming that x = filename.jpg , I want to get filename , where filename could be any file name (Let's assume the file name only contains [a-zA-Z0-9-_] to simplify.).

I saw x.substring(0, x.indexOf('.jpg')) on DZone Snippets , but wouldn't x.substring(0, x.length-4) perform better? Because, length is a property and doesn't do character checking whereas indexOf() is a function and does character checking.

Answer 1

不确定什么会执行得更快，但是当涉及到.jpeg或.html之类的扩展名时，这会更可靠

x.replace(/\.[^/.]+$/, "")

Answer 2

In node.js , the name of the file without the extension can be obtained as follows.

const path = require('path');
const filename = 'hello.html';
    
path.parse(filename).name;     //=> "hello"
path.parse(filename).ext;      //=> ".html"
path.parse(filename).base; //=> "hello.html"

Further explanation at Node.js documentation page.

Answer 3

If you know the length of the extension, you can use x.slice(0, -4) (where 4 is the three characters of the extension and the dot).

If you don't know the length @John Hartsock regex would be the right approach.

If you'd rather not use regular expressions, you can try this (less performant):

filename.split('.').slice(0, -1).join('.')

Note that it will fail on files without extension.

Answer 4

x.length-4 only accounts for extensions of 3 characters. What if you have filename.jpeg or filename.pl ?

EDIT:

To answer... sure, if you always have an extension of .jpg , x.length-4 would work just fine.

However, if you don't know the length of your extension, any of a number of solutions are better/more robust.

x = x.replace(/\..+$/, '');

OR

x = x.substring(0, x.lastIndexOf('.'));

OR

x = x.replace(/(.*)\.(.*?)$/, "$1");

OR (with the assumption filename only has one dot)

parts = x.match(/[^\.]+/);
x = parts[0];

OR (also with only one dot)

parts = x.split(".");
x = parts[0];

Answer 5

You can perhaps use the assumption that the last dot will be the extension delimiter.

var x = 'filename.jpg';
var f = x.substr(0, x.lastIndexOf('.'));

If file has no extension, it will return empty string. To fix that use this function

function removeExtension(filename){
    var lastDotPosition = filename.lastIndexOf(".");
    if (lastDotPosition === -1) return filename;
    else return filename.substr(0, lastDotPosition);
}

Answer 6

我喜欢这个，因为它是一个不太难读的单行：

filename.substring(0, filename.lastIndexOf('.')) || filename

Answer 7

In Node.js versions prior to 0.12.x:

path.basename(filename, path.extname(filename))

Of course this also works in 0.12.x and later.

Answer 8

I don't know if it's a valid option but I use this:

name = filename.split(".");
// trimming with pop()
name.pop();
// getting the name with join()
name.join('.'); // we split by '.' and we join by '.' to restore other eventual points.

It's not just one operation I know, but at least it should always work!

UPDATE: If you want a oneliner, here you are:

(name.split('.').slice(0, -1)).join('.')

Answer 9

This works, even when the delimiter is not present in the string.

String.prototype.beforeLastIndex = function (delimiter) {
    return this.split(delimiter).slice(0,-1).join(delimiter) || this + ""
}

"image".beforeLastIndex(".") // "image"
"image.jpeg".beforeLastIndex(".") // "image"
"image.second.jpeg".beforeLastIndex(".") // "image.second"
"image.second.third.jpeg".beforeLastIndex(".") // "image.second.third"

Can also be used as a one-liner like this:

var filename = "this.is.a.filename.txt";
console.log(filename.split(".").slice(0,-1).join(".") || filename + "");

EDIT: This is a more efficient solution:

String.prototype.beforeLastIndex = function (delimiter) {
    return this.substr(0,this.lastIndexOf(delimiter)) || this + ""
}

Answer 10

另一个单行：

x.split(".").slice(0, -1).join(".")

Answer 11

This can also be done easily with path using the basename and extname methods.

const path = require('path')

path.basename('test.txt', path.extname('test.txt'))

Answer 12

Here's another regex-based solution:

filename.replace(/\.[^.$]+$/, '');

This should only chop off the last segment.

Answer 13

Simple one:

var n = str.lastIndexOf(".");
return n > -1 ? str.substr(0, n) : str;

Answer 14

The accepted answer strips the last extension part only ( .jpeg ), which might be a good choice in most cases.

I once had to strip all extensions ( .tar.gz ) and the file names were restricted to not contain dots (so 2015-01-01.backup.tar would not be a problem):

var name = "2015-01-01_backup.tar.gz";
name.replace(/(\.[^/.]+)+$/, "");

Answer 15

var fileName = "something.extension";
fileName.slice(0, -path.extname(fileName).length) // === "something"

Answer 16

If you have to process a variable that contains the complete path (ex.: thePath = "http://stackoverflow.com/directory/subdirectory/filename.jpg" ) and you want to return just "filename" you can use:

theName = thePath.split("/").slice(-1).join().split(".").shift();

the result will be theName == "filename" ;

To try it write the following command into the console window of your chrome debugger: window.location.pathname.split("/").slice(-1).join().split(".").shift()

If you have to process just the file name and its extension (ex.: theNameWithExt = "filename.jpg" ):

theName = theNameWithExt.split(".").shift();

the result will be theName == "filename" , the same as above;

Notes:

1. The first one is a little bit slower cause performes more operations; but works in both cases, in other words it can extract the file name without extension from a given string that contains a path or a file name with ex. While the second works only if the given variable contains a filename with ext like filename.ext but is a little bit quicker.
2. Both solutions work for both local and server files;

But I can't say nothing about neither performances comparison with other answers nor for browser or OS compatibility.

working snippet 1: the complete path

 var thePath = "http://stackoverflow.com/directory/subdirectory/filename.jpg"; theName = thePath.split("/").slice(-1).join().split(".").shift(); alert(theName);

working snippet 2: the file name with extension

 var theNameWithExt = "filename.jpg"; theName = theNameWithExt.split("/").slice(-1).join().split(".").shift(); alert(theName);

working snippet 2: the file name with double extension

 var theNameWithExt = "filename.tar.gz"; theName = theNameWithExt.split("/").slice(-1).join().split(".").shift(); alert(theName);

Answer 17

Node.js remove extension from full path keeping directory

https://stackoverflow.com/a/31615711/895245 for example did path/hello.html -> hello , but if you want path/hello.html -> path/hello , you can use this:

#!/usr/bin/env node
const path = require('path');
const filename = 'path/hello.html';
const filename_parsed = path.parse(filename);
console.log(path.join(filename_parsed.dir, filename_parsed.name));

outputs directory as well:

path/hello

https://stackoverflow.com/a/36099196/895245 also achieves this, but I find this approach a bit more semantically pleasing.

Tested in Node.js v10.15.2.

Answer 18

虽然已经很晚了，但我将添加另一种方法来使用普通的旧 JS 获取不带扩展名的文件名-

path.replace(path.substr(path.lastIndexOf('.')), '')

Answer 19

This is the code I use to remove the extension from a filename, without using either regex or indexOf (indexOf is not supported in IE8). It assumes that the extension is any text after the last '.' character.

It works for:

• files without an extension: "myletter"
• files with '.'in the name: "my.letter.txt"
• unknown length of file extension: "my.letter.html"

Here's the code:

var filename = "my.letter.txt" // some filename

var substrings = filename.split('.'); // split the string at '.'
if (substrings.length == 1)
{
  return filename; // there was no file extension, file was something like 'myfile'
}
else
{
  var ext = substrings.pop(); // remove the last element
  var name = substrings.join(""); // rejoin the remaining elements without separator
  name = ([name, ext]).join("."); // readd the extension
  return name;
}

Answer 20

You can use path to maneuver.

var MYPATH = '/User/HELLO/WORLD/FILENAME.js';
var MYEXT = '.js';
var fileName = path.basename(MYPATH, MYEXT);
var filePath = path.dirname(MYPATH) + '/' + fileName;

Output

> filePath
'/User/HELLO/WORLD/FILENAME'
> fileName
'FILENAME'
> MYPATH
'/User/HELLO/WORLD/FILENAME.js'

Answer 21

This is where regular expressions come in handy! Javascript's .replace() method will take a regular expression, and you can utilize that to accomplish what you want:

// assuming var x = filename.jpg or some extension
x = x.replace(/(.*)\.[^.]+$/, "$1");

Answer 22

I like to use the regex to do that. It's short and easy to understand.

 for (const regexPattern of [ /\..+$/, // Find the first dot and all the content after it. /\.[^/.]+$/ // Get the last dot and all the content after it. ]) { console.log("myFont.ttf".replace(regexPattern, "")) console.log("myFont.ttf.log".replace(regexPattern, "")) } /* output myFont myFont myFont myFont.ttf */

The above explanation may not be very rigorous. If you want to get a more accurate explanation can go to regex101 to check

• \..+$
• \.[^/.]+$

Answer 23

We might come across filename or file path with multiple extension suffix. Consider the following to trim them.

text = "/dir/path/filename.tar.gz"    
output = text.replace(/(\.\w+)+$/,"")

result of output: "/dir/path/filename"

It solves the file extension problem especially when the input has multiple extensions.

Answer 24

• A straightforward answer, if you are using Node.js, is the one in the first comment.
• My problem was I need to delete an image in Cloudinary from the Node server. I just need to get the image name. Example:

const path = require("path")
const image=xyz.jpg;
const img= path.parse(image).name
console.log(img) // xyz

Answer 25

另一种衬里 - 我们假设我们的文件是 jpg 图片 >> 例如：var yourStr = 'test.jpg';

    yourStr = yourStr.slice(0, -4); // 'test'

Answer 26

x.slice(0, -(x.split('.').pop().length + 1));

Answer 27

First you have to get correct the extension of file then you can remove it

try this code

<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the array values after the split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function getFileName(str){
    var res = str.split('.').pop();
    alert('filename: ' + str.replace('.' + res, ''));
    alert('extension: ' +res);
}
function myFunction() {
    getFileName('abc.jpg');
    getFileName('abc.def.jpg');
    getFileName('abc.def.ghi.jpg');
    getFileName('abc.def.ghi.123.jpg');
    getFileName('abc.def.ghi.123.456.jpg');
    getFileName('abc.jpg.xyz.jpg'); // test with Sébastien comment lol
}
</script>
</body>
</html>

Answer 28

name.split('.').slice(0, -1).join('.')

这就是享受你的编码......

Answer 29

I would use something like x.substring(0, x.lastIndexOf('.')). If you're going for performance, don't go for javascript at all :-p No, one more statement really doesn't matter for 99.99999% of all purposes.