NEW ARTICLE
TypeError: Cannot read property ‘push’ of undefined in Vue.js の解決方法
  1. HOME
  2. javascript
  3. javascript ファイルのパスからファイル名のみを抽出する

javascript ファイルのパスからファイル名のみを抽出する

javascript ファイルのパスからファイル名のみを抽出する

javascriptで、ファイルのパスからファイル名のみを抽出するサンプルコードを記述してます。「replace」メソッド内で「正規表現」を使用する方法と「substring」を使用する方法があります。

目次

環境

  • OS windows11 pro 64bit
  • ブラウザ chrome 109.0.5414.75
Javascript サンプル集はこちら

パスからファイル名のみを抽出

パスからファイル名のみを抽出するには、「replace」で「正規表現」を使用します。

function get(path) {
  return path.replace(/^.*[\\\/]/, '');
}

console.log(get('/path-name/foo.png'));
// foo.png

console.log(get('/../path-name/foo.png'));
// foo.png

console.log(get('/path-name1/../path-name2/foo.png'));
// foo.png

console.log(get('/foo.png'));
// foo.png

console.log(get('./foo.png'));
// foo.png

console.log(get('foo.png'));
// foo.png

substringを使用

「lastIndexOf」を使用して「/」の位置を指定して「substring」で切り出すことも可能です。

function get(path) {    
    return path.substring(path.lastIndexOf('/') + 1);
}

console.log(get('/path-name/foo.png'));
// foo.png

console.log(get('/../path-name/foo.png'));
// foo.png

console.log(get('/path-name1/../path-name2/foo.png'));
// foo.png

console.log(get('/foo.png'));
// foo.png

console.log(get('./foo.png'));
// foo.png

console.log(get('foo.png'));
// foo.png