451

Is there a way that I can get the last value (based on the '\' symbol) from a full path?

Example:

C:\Documents and Settings\img\recycled log.jpg

With this case, I just want to get recycled log.jpg from the full path in JavaScript.

Improve this question

22 Answers 22

Reset to default
886 
var filename = fullPath.replace(/^.*[\\/]/, '')

This will handle both / OR \ in paths.

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

13 Comments

Doesn't work on MAC OSX, using chrome, it escapes character after \
According to this site, using replace is much slower than substr, which can be used in conjunction with lastIndexOf('/')+1: jsperf.com/replace-vs-substring
@nickf Nick, not sure where I am going wrong but the code doesn't work for me when the file path is having single slash. Fiddle, although for `\\`, it works fine.
I just ran this on my console, and it worked perfect for forward slashes: "/var/drop/foo/boo/moo.js".replace(/^.*[\\\/]/, '') returns moo.js
Can you explain the regex?
|
208

Just for the sake of performance, I tested all the answers given here:

var substringTest = function (str) {
    return str.substring(str.lastIndexOf('/')+1);
}

var replaceTest = function (str) {
    return str.replace(/^.*(\\|\/|\:)/, '');
}

var execTest = function (str) {
    return /([^\\]+)$/.exec(str)[1];
}

var splitTest = function (str) {
    return str.split('\\').pop().split('/').pop();
}

substringTest took   0.09508600000000023ms
replaceTest   took   0.049203000000000004ms
execTest      took   0.04859899999999939ms
splitTest     took   0.02505500000000005ms

And the winner is the Split and Pop style answer, Thanks to bobince !

Improve this answer

4 Comments

Per the meta discussion, please add appropriate citation to other answers. It would also be helpful to better explain how you analyzed the runtime.
Feel free to benchmark this version as well. Should support both Mac and Windows file paths. path.split(/.*[\/|\\]/)[1];
The test is incorrect. substringTest searches only for forward slash, execTest - only for backslash while two remaining handle both slashes. And actual results are not relevant (anymore). Check this out: jsperf.com/name-from-path
@Grief that link is no longer valid.
194

In Node.js, to just get the basename, you can use the Path's modules basename function:

var path = require('path');
var file = '/home/user/dir/file.txt';
var name = path.basename(file)

If you're doing more things with the file, you may want to use Path's parse function:

var details = path.parse(file);
//=> { root: '/', dir: '/home/user/dir', base: 'file.txt', ext: '.txt', name: 'file' }
var name = details.base
//=> 'file.txt'
Improve this answer

2 Comments

If using Node.js you can just use the basename function: path.basename(file)
Beware ye who look for answers when using webpack 5. In webpack 5, native modules are no longer polyfilled and have been a headache for me trying to fix the issue.
97

What platform does the path come from? Windows paths are different from POSIX paths are different from Mac OS 9 paths are different from RISC OS paths are different...

If it's a web app where the filename can come from different platforms there is no one solution. However a reasonable stab is to use both '\' (Windows) and '/' (Linux/Unix/Mac and also an alternative on Windows) as path separators. Here's a non-RegExp version for extra fun:

var leafname= pathname.split('\\').pop().split('/').pop();
Improve this answer

5 Comments

You may want to add that classic MacOS (<= 9) used colon separators (:), but I'm not aware of any browsers that may still be in use that didn't translate MacOS paths to POSIX paths in the form of file:///path/to/file.ext
You can just use pop() instead of reverse()[0]. It modifies the original array too but it's okay in your case.
I'm wondering how we can create a counterpart to get just the path.
Something like var path = '\\Dir2\\Sub1\\SubSub1'; //path = '/Dir2/Sub1/SubSub1'; path = path.split('\\').length > 1 ? path.split('\\').slice(0, -1).join('\\') : path; path = path.split('/').length > 1 ? path.split('/').slice(0, -1).join('/') : path; console.log(path);
Naming "leafname" is derived from Directory/File structure name "Tree", first thing of tree is root, the last are the leaves => file name is the last thing in the treepath => leaf :-)
33

Ates, your solution doesn't protect against an empty string as input. In that case, it fails with TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no properties.

bobince, here's a version of nickf's that handles DOS, POSIX, and HFS path delimiters (and empty strings):

return fullPath.replace(/^.*(\\|\/|\:)/, '');
Improve this answer

1 Comment

if we are writing this JS code in PHP, we need to add one extra \ for each \
26

The following line of JavaScript code will give you the file name.

var z = location.pathname.substring(location.pathname.lastIndexOf('/')+1);
alert(z);
Improve this answer

Comments

16

In Node.js, you can use the path.basename method

const path = require('path');
const file = '/home/user/dir/file.txt';

const filename = path.basename(file);
//=> 'file.txt'
Improve this answer

Comments

15

Another one

var filename = fullPath.split(/[\\\/]/).pop();

Here split have a regular expression with a character class
The two characters have to be escaped with '\'

Or use array to split 

var filename = fullPath.split(['/','\\']).pop();

It would be the way to dynamically push more separators into an array, if needed.
If fullPath is explicitly set by a string in your code it need to escape the backslash!
Like "C:\\Documents and Settings\\img\\recycled log.jpg"

Improve this answer

2 Comments

Regarding "array to split", I don't see an option to pass an array as a list of delimiters. In fact, the documentation states "If the separator is an array, then that Array is coerced to a String and used as a separator."
.split(['/','\\']) is the same as .split("/,\\"), which is absolutely not what you want.
13

There’s no need to handle backslashes specially; most answers don’t handle search parameters.

The modern approach is to simply use the URL API and get the pathname property. The API normalizes backslashes to slashes. Note that location (in a browser environment) works, too, but only for the current URL, not an arbitrary URL.

In order to parse the resulting %20 to a space, simply pass it to decodeURIComponent.

const getFileName = (fileName) => new URL(fileName).pathname.split("/").pop();

// URLs need to have the scheme portion, e.g. `file://` or `https://`.
console.log(getFileName("file://C:\\Documents and Settings\\img\\recycled log.jpg")); // "recycled%20log.jpg"
console.log(decodeURIComponent(getFileName("file://C:\\Documents and Settings\\img\\recycled log.jpg"))); // "recycled log.jpg"
console.log(getFileName("https://example.com:443/path/to/file.png?size=480")); // "file.png"
.as-console-wrapper { max-height: 100% !important; top: 0; }

Add a .filter(Boolean) before the .pop() if you always want the last non-empty part of the path (e.g. file.png from https://example.com/file.png/).

If you only have a relative URL but still simply want to get the file name, use the second argument of the URL constructor to pass a base origin. "https://example.com" suffices: new URL(fileName, "https://example.com"). It’s also possible to prepend "https://" to your fileName — the URL constructor accepts https://path/to/file.ext as a valid URL.

Improve this answer

3 Comments

I reviewed the URL API for the umpteenth time today, and I still find it wanting because I cannot see anything that it offers that isn't already provided by the built-in location object.
@DavidA.Gray E.g. URL validation: try{ new URL(url); return true; } catch{ return false; } checks if a URL is valid or not. Not possible with location. In this answer, URL is not necessarily used for the current URL; I don’t see how to get URI components from an arbitrary URL easily by only using location (and without redirecting). Another thing is the search parameter API: there is no location.searchParams, but a URLSearchParams object has useful methods. Also, location doesn’t exist outside of browsers, but URL might.
@DavidA.Gray Also, from the specification: “Warning: The Location exotic object is defined through a mishmash of IDL, invocation of JavaScript internal methods post-creation, and overridden JavaScript internal methods. Coupled with its scary security policy, please take extra care while implementing this excrescence.”.
10

Not more concise than nickf's answer, but this one directly "extracts" the answer instead of replacing unwanted parts with an empty string:

var filename = /([^\\]+)$/.exec(fullPath)[1];
Improve this answer

Comments

9

A question asking "get file name without extension" refer to here but no solution for that. Here is the solution modified from Bobbie's solution.

var name_without_ext = (file_name.split('\\').pop().split('/').pop().split('.'))[0];
Improve this answer

Comments

4

I use: 

var lastPart = path.replace(/\\$/,'').split('\\').pop();

It replaces the last \ so it also works with folders.

Improve this answer

Comments

4

This solution is much simpler and generic, for both 'fileName' and 'path'.

parsePath = (path) => {
    // regex to split path (untile last / or \ to two groups '(.*[\\\/])' for path and '(.*)' (untile the end after the \ or / )for file name
    const regexPath = /^(?<path>(.*[\\\/])?)(?<filename>.*)$/;

    const match = regexPath.exec(path);
    if (path && match) {
        return {
            path: match.groups.path,
            filename: match.groups.filename
        }
    }
    throw Error("Error parsing path");
}

// example
const str = 'C:\\Documents and Settings\\img\\recycled log.jpg';
parsePath(str);

​

Improve this answer

2 Comments

The quality of an answer can be improved by adding some explanation to your code. Some folks searching for this answer may be new to coding, or regular expressions, and a little text to give context will go a long way to help understanding.
hope this way is better :)
3

Little function to include in your project to determine the filename from a full path for Windows as well as GNU/Linux & UNIX absolute paths.

/**
 * @param {String} path Absolute path
 * @return {String} File name
 * @todo argument type checking during runtime
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
 * @example basename('/home/johndoe/github/my-package/webpack.config.js') // "webpack.config.js"
 * @example basename('C:\\Users\\johndoe\\github\\my-package\\webpack.config.js') // "webpack.config.js"
 */
function basename(path) {
  let separator = '/'

  const windowsSeparator = '\\'

  if (path.includes(windowsSeparator)) {
    separator = windowsSeparator
  }

  return path.slice(path.lastIndexOf(separator) + 1)
}
Improve this answer

Comments

2 
<script type="text/javascript">
    function test()
    {
        var path = "C:/es/h221.txt";
        var pos =path.lastIndexOf( path.charAt( path.indexOf(":")+1) );
        alert("pos=" + pos );
        var filename = path.substring( pos+1);
        alert( filename );
    }
</script>
<form name="InputForm"
      action="page2.asp"
      method="post">
    <P><input type="button" name="b1" value="test file button"
    onClick="test()">
</form>
Improve this answer

Comments

1

The complete answer is:

<html>
    <head>
        <title>Testing File Upload Inputs</title>
        <script type="text/javascript">

        function replaceAll(txt, replace, with_this) {
            return txt.replace(new RegExp(replace, 'g'),with_this);
        }

        function showSrc() {
            document.getElementById("myframe").href = document.getElementById("myfile").value;
            var theexa = document.getElementById("myframe").href.replace("file:///","");
            var path = document.getElementById("myframe").href.replace("file:///","");
            var correctPath = replaceAll(path,"%20"," ");
            alert(correctPath);
        }
        </script>
    </head>
    <body>
        <form method="get" action="#"  >
            <input type="file"
                   id="myfile"
                   onChange="javascript:showSrc();"
                   size="30">
            <br>
            <a href="#" id="myframe"></a>
        </form>
    </body>
</html>
Improve this answer

Comments

1

A simple function like PHP pathInfo:

function pathInfo(s) {
    s=s.match(/(.*?[\\/:])?(([^\\/:]*?)(\.[^\\/.]+?)?)(?:[?#].*)?$/);
    return {path:s[1],file:s[2],name:s[3],ext:s[4]};
}

console.log( pathInfo('c:\\folder\\file.txt') );

console.log( pathInfo('/folder/another/file.min.js?query=1') );
Type and try it:
<input oninput="document.getElementById('test').textContent=pathInfo(this.value).file" value="c:\folder\folder.name\file.ext" style="width:300px">

Improve this answer

2 Comments

The PHP function omits the . from the extension.
Thanks, that's right. also the PHP function parameter-names are different but work just "like" pahtInfo. The target in my function is being able to reassemble the result parts, to another string without adding extra characters.
0 
<html>
    <head>
        <title>Testing File Upload Inputs</title>
        <script type="text/javascript">
            <!--
            function showSrc() {
                document.getElementById("myframe").href = document.getElementById("myfile").value;
                var theexa = document.getElementById("myframe").href.replace("file:///","");
                alert(document.getElementById("myframe").href.replace("file:///",""));
            }
            // -->
        </script>
    </head>
    <body>
        <form method="get" action="#"  >
            <input type="file" 
                   id="myfile" 
                   onChange="javascript:showSrc();" 
                   size="30">
            <br>
            <a href="#" id="myframe"></a>
        </form>
    </body>
</html>
Improve this answer

1 Comment

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
0

Successfully Script for your question ,Full Test

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<p  title="text" id="FileNameShow" ></p>
<input type="file"
   id="myfile"
   onchange="javascript:showSrc();"
   size="30">



<script type="text/javascript">

function replaceAll(txt, replace, with_this) {
    return txt.replace(new RegExp(replace, 'g'), with_this);
}

function showSrc() {
    document.getElementById("myframe").href = document.getElementById("myfile").value;
    var theexa = document.getElementById("myframe").href.replace("file:///", "");
    var path = document.getElementById("myframe").href.replace("file:///", "");
    var correctPath = replaceAll(path, "%20", " ");
   alert(correctPath);
    var filename = correctPath.replace(/^.*[\\\/]/, '')
    $("#FileNameShow").text(filename)
}

Improve this answer

Comments

0

Replace is slower use substring

var fileName = fullPath.substring(fullPath.lastIndexOf('\\')+1);

Note: If you want to get from input field than you can directly get by the bellow simple code if any file is selected. Assume id="file"

var fileName = document.getElementById('file').files[0].name;
Improve this answer

Comments

-3 
function getFileName(path, isExtension){

  var fullFileName, fileNameWithoutExtension;

  // replace \ to /
  while( path.indexOf("\\") !== -1 ){
    path = path.replace("\\", "/");
  }

  fullFileName = path.split("/").pop();
  return (isExtension) ? fullFileName : fullFileName.slice( 0, fullFileName.lastIndexOf(".") );
}
Improve this answer

Comments

-3

var file_name = file_path.substring(file_path.lastIndexOf('/'));

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.