如何使用 javascript/jquery 从 url 中提取文件名?

Posted

技术标签:

【中文标题】如何使用 javascript/jquery 从 url 中提取文件名?【英文标题】:How to pull the file name from a url using javascript/jquery? 【发布时间】:2010-11-21 02:22:48 【问题描述】:

某个变量可能包含相对路径或绝对路径。无论哪种方式,我都需要能够从变量中提取文件名:

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

目录结构也是任意的。所以基本上给定上面的任何一个url(带有任意目录结构)我需要拉'filename.gif'。提前致谢

【问题讨论】:

参见可能的重复:How to get the file name from a full path using javascript? 【参考方案1】:

我的回答处理 URL 已编码或 URL 包含作为编码 URL 的查询值的边缘情况,其中 / 变为 %2F

const getImageNameFromURL = (urlInput) => 
  const imageFullnameResult = urlInput.match(/.+(\/|%2F)(.+)/);

  if (!imageFullnameResult) return null;

  const imageFullname = imageFullnameResult[2];

  const imageNameResult = imageFullname.match(
    /.+(jpg|png|svg|jpeg|webp|bmp|gif)/
  );

  if (!imageNameResult) return imageFullname;

  const imageName = imageNameResult[0];

  if (!imageName) return null;

  return imageName;
;

// common URL
const commonURL = 'https://static.tvtropes.org/pmwiki/pub/images/aubrey_plaza.jpg?quality=75&w=1200&h=900&crop=1'

// URL contains query which is an encoded URL which is the actual image.
const urlContainsEncodedURL = 'https://ca-times.brightspotcdn.com/dims4/default/a7ccc15/2147483647/strip/true/crop/2048x1152+0+0/resize/840x473!/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2Fd5%2Fb5%2Fa8bffb00214d8bd8149373c18a6a%2Fla-1467703026-snap-photo'

console.log(getImageNameFromURL(commonURL))
// result: aubrey_plaza.jpg


console.log(getImageNameFromURL(urlContainsEncodedURL))
// result: la-1467703026-snap-photo

【讨论】:

【参考方案2】:

我通过这个解决了这个问题:

var URL = window.location.pathname; // Gets page name
var page = URL.substring(URL.lastIndexOf('/') + 1); 
// then display your filename to console
console.info(page)

【讨论】:

【参考方案3】:
var filename= url.split('/').pop()

【讨论】:

【参考方案4】:
    var pathnameArray = window.location.pathname.split("/");
    var nameOfFile = pathnameArray[pathnameArray.length -1];

在考虑创建数组与使用其他人提到的 substr 时,可能存在一些我不知道的开销。所以也许这不是一个很好的答案,而是解决同一问题的不同方法。

【讨论】:

【参考方案5】:

如果你的网址是这样的:

yourdomain.com/app_dev.php
yourdomain.com/app_dev.php/article/2

而您只想提取文件名 (/app_dev.php) 以便可以链接到您的主页,请使用:

var filename = window.location.pathname.substr(0, window.location.pathname.indexOf("/", 1));
window.location = filename;

【讨论】:

【参考方案6】:
var URL = window.location.pathname; // Gets page name
var page = URL.substring(URL.lastIndexOf('/') + 1);  
alert(page);

【讨论】:

【参考方案7】:
var index = yourstring.lastIndexOf("/") + 1;
var filename = yourstring.substr(index);

【讨论】:

这比使用正则表达式快吗? 我收到的是 /filename.gif 而不是 filename.gif。在调用 substr 之前,索引应该增加 1。 使用slice 代替substr: JavaScript: Slice, Substring, or Substr? @Gregoire 如果 / 是 \ 会发生什么,那么您如何获取文件名? @Pomster var index = yourstring.lastIndexOf("\\") + 1;【参考方案8】:

感谢 sam deng,似乎可以工作,但我的朋友你有一个错字:

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

【讨论】:

感谢您的帮助,但您应该将此作为对相关答案的评论,而不是发布新的(将来您将能够建议对其他人的答案进行编辑)【参考方案9】:
var filename = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

【讨论】:

【参考方案10】:

短途

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

【讨论】:

这个不支持filename.php/arctile/slug-name(它会返回slug-name) 当您只检索值时,我建议使用document.URL 代替window.location.href【参考方案11】:
// Extract filename from current page.
var filePath = window.location.pathname;
var fileName = filePath.substr(urlPath.lastIndexOf("/") + 1);

【讨论】:

什么是urlPath?它不是变量或窗口属性。【参考方案12】:
var path = window.location.pathname;
var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];

如果您不希望查询字符串成为文件名的一部分(您可能不希望),请使用此选项。

【讨论】:

好极了,但是你能不能扩展最后也去掉参数的功能,包括一个“”?谢谢 @JamesCazzetta:可能对你的需求有点过分了,但这会从一个 URI 中得到你需要的一切:gist.github.com/1169555【参考方案13】:

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

但是,如果您的 URI 实际上足够复杂,您可以尝试 Steven Levithan 的 parseUri

parseUri(uri).file;

它有 2 种模式,每一种都有自己的怪癖,所以一定要check out the demo。

【讨论】:

【参考方案14】:
var filename = url.match(/.*\/(.*)$/)[1];

【讨论】:

【参考方案15】:

我会使用正则表达式。

[^/]*$

它选择最后一个斜杠之后的所有内容,直到最后。您可以展开它以单独选择扩展名:

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

【讨论】:

我发现这个正则表达式更清晰,但它不是用 JavaScript 编写的......这是完整的东西:url.match('[^/]*$')[0]【参考方案16】:

使用正则表达式,按照这些思路应该可以解决问题:

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

虽然这并不能涵盖所有可能的情况,但它应该非常适合大多数情况。你可以使用这些:

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

希望有帮助

【讨论】:

不。这将导致匹配 ["http:"]

以上是关于如何使用 javascript/jquery 从 url 中提取文件名?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 JavaScript/jQuery 从 HTML 中获取符号的 unicode/hex 表示?

如何使用 javascript/jquery 从 URL 中删除获取变量和文件名?

如何从 .cs 文件 (C#) 调用 JavaScript/jQuery 函数

使用 Javascript/jquery 如何从选定行中的每个单元格获取值

如何使用 JavaScript/jQuery 从 ASP.NET Web 窗体的 GridView 内部同时上传多个文件?

如何使用 javascript / jQuery 获取数据 ajax api 数组?