如何使用JavaScript从完整路径获取文件名？

有没有办法可以从完整路径中获取最后一个值（基于'\'符号）？

示例：

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

在这种情况下，我只想从JavaScript的完整路径中获取recycled log.jpg。

#1 楼

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

这将同时处理\ OR /路径中的

在使用chrome的MAC OSX上不起作用，它会在\之后转义字符

–潘卡季（Pankaj Phartiyal）
13年4月4日在7:36

根据此站点的信息，使用replace比substr慢得多，substr可以与lastIndexOf（'/'）+ 1结合使用：jsperf.com/replace-vs-substring

–内特
2014年8月3日在1:39

@nickf尼克，不确定我要去哪里哪里，但是当文件路径使用单斜杠时，代码对我不起作用。小提琴，尽管对于“ \\”来说，它工作正常。

–嘘
2014年8月13日10:52

我只是在控制台上运行了它，它非常适合于正斜杠：“ /var/drop/foo/boo/boo/moo.js".replace(/^.*[\\\/]/，''）返回moo .js

–vikkee
17年1月10日23:32

@ZloySmiertniy有几个不错的在线正则表达式解释器。 rick.measham.id.au/paste/explain.pl?regex=%2F%5E.*%5B%5C%5C%5C%2F%5D%2F和regexper.com/#%2F%5E.*%5B ％5C％5C％5C％2F％5D％2F应该会有所帮助。（链接在这里断开了，但是将其复制粘贴到选项卡中就可以了）

–nickf
17-2-6在12:07

#2 楼

仅出于性能考虑，我测试了此处给出的所有答案：

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

赢家是Split and Pop风格的答案，这要感谢bobince！ >

根据元讨论，请在其他答案中添加适当的引文。更好地解释您如何分析运行时也将很有帮助。

– jpmc26
16年2月15日在21:42

也可以随意对该版本进行基准测试。应该同时支持Mac和Windows文件路径。 path.split（/.*[\/ | \\] /）[1];

–tfmontague
17年7月9日在3:23

测试不正确。 substringTest仅搜索正斜杠，execTest-仅搜索反斜杠，而其余两个则同时处理两个斜杠。与实际结果无关（不再）。检查一下：jsperf.com/name-from-path

–悲伤
18年8月14日在11:23

@Grief该链接不再有效。

–crthompson
19年5月9日15:56

#3 楼

在Node.js中，您可以使用Path的解析模块...

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

var filename = path.parse(file).base;
//=> 'file.txt'

如果使用Node.js，则可以使用basename函数：path.basename（file）

– Electrovir
19年12月11日在19:30

#4 楼

路径来自什么平台？ Windows路径与POSIX路径不同，Mac OS 9与RISC OS路径不同...

如果这是一个Web应用程序，其文件名可以来自不同的平台，则没有人解。但是，合理的方法是同时使用“ \”（Windows）和“ /”（Linux / Unix / Mac，以及Windows上的另一个）作为路径分隔符。这是一个非RegExp版本，可以带来更多乐趣：

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

您可能要添加经典的MacOS（<= 9）使用冒号分隔符（:)，但我不知道任何仍在使用的浏览器没有将MacOS路径转换为文件形式的MacOS路径：///path/to/file.ext

–失明
09年7月19日在19:05

您可以只使用pop（）而不是reverse（）[0]。它也修改了原始数组，但您的情况还可以。

–Chetan S
09年7月19日在19:10

我想知道我们如何创建一个对应的路径。

–托德·霍斯特（Todd Horst）
2014年10月15日14:53

像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（'/'）：路径; console.log（path）;

–托德·霍斯特（Todd Horst）
2014年10月15日15:00

命名“叶名”是从目录/文件结构名称“树”派生的，树的第一件事是根，最后是叶子=>文件名是树路径中的最后一件事情=> leaf :-)

–jave.web
16-10-31在10:49

#5 楼

Ates，您的解决方案无法防止输入空字符串。在这种情况下，它将失败并显示TypeError: /([^(\|\/|\:)]+)$/.exec(fullPath) has no properties。

bobince，这是nickf的一个版本，可以处理DOS，POSIX和HFS路径定界符（以及空字符串）：

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

如果我们使用PHP编写此JS代码，则需要为每个\添加一个额外的\

–列宁·拉杰·拉塞卡斯卡兰（Lenin Raj Rajasekaran）
2011-2-26在17:12

#6 楼

以下JavaScript代码行将为您提供文件名。

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

#7 楼

它比nickf的答案更简洁，但是它直接“提取”了答案，而不是用空字符串替换不需要的部分：

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

#8 楼

一个询问“获取不带扩展名的文件名”的问题在这里引用，但没有解决方案。
这是从Bobbie的解决方案修改而来的解决方案。

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

#9 楼

另一个

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

这里拆分有一个带有字符类的正则表达式
两个字符必须用'\'进行转义

或者使用数组拆分

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

如果需要，这是将更多分隔符动态推入数组的方法。
如果明确设置了fullPath代码中的字符串需要转义反斜杠！
像"C:\Documents and Settings\img\recycled log.jpg"

关于“拆分数组”，我看不到将数组作为定界符列表传递的选项。实际上，文档指出“如果分隔符是数组，则该数组被强制为字符串并用作分隔符。”

–mherzog
20年8月10日在19:45

#10 楼

我使用：

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

它代替了最后一个\，因此它也可以用于文件夹。

#11 楼

<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>

#12 楼

在您的项目中几乎没有什么功能可以从Windows的完整路径以及GNU / Linux和UNIX绝对路径确定文件名。

/**
 * @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)
}

#13 楼

完整的答案是：

<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>

#14 楼

<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>

尽管此代码段可以解决问题，但提供说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。

– Ferrybig
16年2月12日在15:13

#15 楼

为您的问题成功编写脚本，进行全面测试

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

#16 楼

对于“文件名”和“路径”，此解决方案都更加简单和通用。

const str = 'C:\Documents and Settings\img\recycled log.jpg';

// regex to split path to two groups '(.*[\\/])' for path and '(.*)' for file name
const regexPath = /^(.*[\\/])(.*)$/;

// execute the match on the string str
const match = regexPath.exec(str);
if (match !== null) {
    // we ignore the match[0] because it's the match for the hole path string
    const filePath = match[1];
    const fileName = match[2];
}

可以通过在代码中添加一些解释来提高答案的质量。有些人正在寻找这个答案，这可能对编码或正则表达式来说是陌生的，而提供一些上下文相关的文本将有助于理解。

– jmarkmurphy
19-09-30在17:56

希望这种方式更好:)

–希瑟姆
19年10月1日在9:38

#17 楼

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(".") );
}

#18 楼

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

编程黑洞网