如何使用JavaScript/jQuery从URL中提取文件名？

Question

某个变量可能包含相对路径或绝对路径。无论哪种情况，我都需要能够从变量中提取文件名：

http://www.somesite.com/dir1/dir2/filename.gif
/dir1/dir2/filename.gif

目录结构也是任意的。因此，基本上给定上述任意一个URL（具有任意的目录结构），我需要提取“filename.gif”。提前感谢。

- jim23

---

请参考可能的重复问题：如何使用JavaScript从完整路径获取文件名？ - Bergi

Answer 1

var index = yourstring.lastIndexOf("/") + 1;
var filename = yourstring.substr(index);

- Gregoire

---

我得到了/filename.gif而不是filename.gif。在调用substr之前，索引应该加1。 - Mariano Desanze

使用 slice 替代 substr: JavaScript: Slice, Substring, or Substr? - Web_Designer

@Gregoire如果 / 是 \，那么如何获取文件名？请问您的看法。 - Pomster

@Pomster var index = yourstring.lastIndexOf("\") + 1; @Pomster 变量索引 = yourstring.lastIndexOf("\") + 1; - Gregoire

这段代码无法处理URL包含嵌套编码URL的边缘情况。你可能会得到一个像这样的值?url=https%3A%2F%2Ffoobar%2Fimage.jpg，而实际上你想要的是image.jpg。我发布了一个解决此问题的答案。 - Caleb Taylor

Answer 2

更短的方式

var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

- Rodrigo

---

这不支持filename.php/arctile/slug-name（它将返回slug-name）。 - TroodoN-Mike

当您仅需要检索值时，我建议使用document.URL代替window.location.href。 - Web_Designer

Answer 3

var filename = url.match(/.*\/(.*)$/)[1];

- Christian C. Salvadó

Answer 4

var filename= url.split('/').pop()

- rash

Answer 5

我会使用正则表达式。

[^/]*$

它选择最后一个斜杠后面的所有内容直到结尾。您可以扩展它以单独选择扩展名：

/([^/]*?)(\.[^\./]*)?$

- Thom Smith

---

我认为这个正则表达式更清晰，但它不是用JavaScript编写的... 这是完整的代码：url.match('[^/]*$')[0] - Jason

Answer 6

var path = window.location.pathname;
var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];

如果您不希望查询字符串成为文件名的一部分（您可能不希望出现这种情况），可以使用此选项。

- kflorence

---

很好，但您能否扩展功能，以便在结尾也剪切参数，包括 "?" 吗？谢谢。 - James Cazzetta

@JamesCazzetta：也许对你的需求有些过度，但这将为你从URI中获取所需的一切：https://gist.github.com/1169555 - kflorence

Answer 7

var URL = window.location.pathname; // Gets page name
var page = URL.substring(URL.lastIndexOf('/') + 1);  
alert(page);

- afro360

Answer 8

// Extract filename from current page.
var filePath = window.location.pathname;
var fileName = filePath.substr(urlPath.lastIndexOf("/") + 1);

- Sam Deng

---

什么是urlPath？它不是变量或窗口属性。 - Caleb Taylor

Answer 9

对于你的示例，子字符串搜索可能是最佳选择。

但是，如果你的URI实际上非常复杂，可以尝试使用Steven Levithan的parseUri：

parseUri(uri).file;

它有两种模式，每种模式都有其特点，因此一定要查看演示。

- Jonathan Lonowski

Answer 10

使用正则表达式，类似以下的内容应该可以解决问题：

[^/]+\.[^/]+

虽然这并不能涵盖所有可能的情况，但对于大多数情况来说应该已经足够了。您可以使用以下方法：

var url = window.location.href;
var regex = new RegExp("[^/]+\.[^/]+");
var fileName = regex.exec(url);

希望这有所帮助。

- LorenVS

---

不对。这会导致匹配["http:"]。 - Crescent Fresh