如何使用 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 内部同时上传多个文件?