【JavaScript】URLから最後のスラッシュまでのテキストを削除してファイル名を取得する方法

たとえば、次のようなURLがあったとします。

https://www.tutorialspoint.com/advanced_microsoft_word_2013_tutorial/index.asp

このURLから、最後の値（ファイル名）だけを取得し、それ以外の部分はすべて削除したいケースはよくあります。期待する出力結果は次のとおりです。

index.asp

このような処理を実現するには、replace()メソッドと正規表現を組み合わせて使うのが便利です。

コード例

以下が実際のコードです。

var url = "https://www.tutorialspoint.com/advanced_microsoft_word_2013_tutorial/index.asp";
var getValues = url.replace(/^.*\//, '');
console.log("元の値 = " + url);
console.log("新しい値 = " + getValues);

ここで使っている正規表現 /^.*\// は、「文字列の先頭から最後のスラッシュ（/）まで」に一致するパターンです。この部分を空文字に置き換えることで、最後のスラッシュ以降に残った文字列（この例では index.asp）だけを取り出せます。

上記のプログラムを実行するには、Node.jsで次のコマンドを実行します。

node fileName.js

ここでは、ファイル名を demo258.js として保存しています。

出力結果

コンソールには次のように表示されます。

PS C:\Users\Amit\javascript-code> node demo258.js
The original value = https://www.tutorialspoint.com/advanced_microsoft_word_2013_tutorial/index.asp
New Value = index.asp

別の方法：split()を使う

replace()を使わなくても、split()とpop()を組み合わせれば、同じ結果をより直感的なコードで得られます。

var getValues = url.split('/').pop();
console.log(getValues); // index.asp

この方法では、URLをスラッシュで分割した配列の末尾の要素を取得しています。可読性を重視したい場合は、こちらの書き方を選ぶのもよいでしょう。用途やチームのコーディング規約に合わせて、使いやすい方法を採用してください。