JavaScriptを使用してフルパスからファイル名を取得するにはどうすればよいですか?


310

フルパスから最後の値(「\」記号に基づく)を取得する方法はありますか?

例:

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

この場合、recycled log.jpgJavaScriptのフルパスから取得したいだけです。

回答:


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

これはパスで\ OR /の両方を処理します


4
MAC OSXでは機能せず、クロムを使用します。\の後に文字をエスケープします
Pankaj Phartiyal

7
このサイトによると、使用replaceはと比べてはるかに遅いためsubstr、以下と組み合わせて使用​​できます。jsperf.comlastIndexOf('/')+1 / replace
Nate

1
@nickfニック、どこが間違っているのかわかりませんが、ファイルパスに単一のスラッシュが含まれていると、コードが機能しません。Fiddle`\\`の場合は問題なく動作します。
Shubh 2014

1
私はこれをコンソールで実行したところ、スラッシュに最適でした:"/var/drop/foo/boo/moo.js".replace(/^.*[\\\/]/, '')リターンmoo.js
vikkee 2017年

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

115

パフォーマンス向上のために、ここに記載されているすべての回答をテストしました。

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


4
メタディスカッションに従って、他の回答に適切な引用を追加してください。また、ランタイムの分析方法を詳しく説明することも役立ちます。
jpmc26 2016

このバージョンもベンチマークしてください。MacとWindowsの両方のファイルパスをサポートする必要があります。path.split(/.*[\/|\\]/)[1];
tfmontague 2017

2
テストが正しくありません。substringTestは、スラッシュ、execTestのみを検索します。残りの2つは両方のスラッシュを処理しますが、バックスラッシュのみを検索します。そして実際の結果は(もう)関係ありません。これをチェックしてください:jsperf.com/name-from-path
悲しみ

@Griefそのリンクはもはや有効ではありません。
paqogomez

88

Node.jsでは、Pathの解析モジュールを使用できます ...

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

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

14
Node.jsのを使用している場合、あなたは、単に使用することができますbasename機能を:path.basename(file)
electrovir

66

パスはどのプラットフォームからのものですか?WindowsパスはPOSIXパスとは異なり、Mac OS 9パスはRISC OSパスとは異なります...

ファイル名が異なるプラットフォームから取得される可能性があるWebアプリの場合、解決策は1つではありません。ただし、妥当なスタブは、パス区切り文字として「\」(Windows)と「/」(Linux / Unix / MacおよびWindowsの代替)の両方を使用することです。ここに、RegExp以外のバージョンがあります。

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

コロン区切り文字(:)を使用した従来のMacOS(<= 9)を追加することもできますが、MacOSパスをファイル形式のPOSIXパスに変換しなかった、まだ使用されている可能性のあるブラウザーについては知りません:///path/to/file.ext
まぶたがない2009

4
reverse()[0]の代わりにpop()を使用できます。元の配列も変更しますが、あなたの場合は問題ありません。
Chetan Sastry

パスだけを取得するためのカウンターパートをどのように作成できるのかと思います。
トッドホルスト

何か 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);
トッドホルスト

命名「葉の名前は」ディレクトリ/ファイル構造名「ツリー」に由来し、の最初のツリーがあるルートの最後は、 =>ファイル名はで最後のものであるツリーパス=> :-)
jave。ウェブ

29

Ates、あなたのソリューションは入力として空の文字列から保護しません。その場合、で失敗しTypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no propertiesます。

bobince、これはDOS、POSIX、およびHFSパス区切り文字(および空の文字列)を処理するnickfのバージョンです。

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

4
このJSコードをPHPで記述している場合は、\ごとに1つの追加\を追加する必要があります
Lenin Raj Rajasekaran

17

JavaScriptコードの次の行は、ファイル名を示します。

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

10

nickfの回答ほど簡潔ではありませんが、これは不要な部分を空の文字列で置き換えるのではなく、直接回答を「抽出」します。

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

8

「拡張子なしのファイル名を取得する」という質問は、こちらを参照してください。解決策はありません。これはボビーのソリューションから変更されたソリューションです。

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

6

別のもの

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

ここで分割には、文字クラス
の正規表現があります。2つの文字は「\」でエスケープする必要があります

または配列を使用して分割する

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

必要に応じて、より多くのセパレータを配列に動的にプッシュする方法になります。コード内の文字列によって明示的に設定されている
場合fullPath、バックスラッシュエスケープする必要があります
お気に入り"C:\\Documents and Settings\\img\\recycled log.jpg"


3

私が使う:

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

それは最後のものを置き換える\ので、フォルダでも機能します。


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>

1

完全な答えは次のとおりです。

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

1

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

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>

1
このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
Ferrybig 2016

0

質問のスクリプトを作成し、完全なテストを行います

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


0

このソリューションは、「ファイル名」と「パス」の両方について、はるかに単純で汎用的です。

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

この方法がより良いことを願っています:)
Hicham

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.