前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS获取图片URL并截取文件名和后缀

JS获取图片URL并截取文件名和后缀

作者头像
德顺
发布2020-08-11 15:33:57
11.1K0
发布2020-08-11 15:33:57
举报
文章被收录于专栏:前端资源前端资源

最近在改一个之前别人对接项目,遇到一个问题。现在要解决问题,需要获取图片的链接,并把链接中的(图片)文件名提取出来。下面开始:

比如,图片的 URL 地址是:https://www.w3h5.com/zb_users/upload/2019/04/201904031554286068121005.png?type=w3h5.com

这里用到 split() 方法,可以把一个字符串分割成字符串数组。 

先用 split('?') 把 URL 和参数分离:

代码语言:javascript
复制
let url = "https://www.w3h5.com/zb_users/upload/2019/04/201904031554286068121005.png",
http = url.split('?')[0]
console.log(http);

打印结果:

代码语言:javascript
复制
https://www.w3h5.com/zb_users/upload/2019/04/201904031554286068121005.png

再用 split('/') 继续拆分:

代码语言:javascript
复制
let file = http.split('/')
console.log(file);

打印结果:

代码语言:javascript
复制
[0: "https:"
1: ""
2: "www.w3h5.com"
3: "zb_users"
4: "upload"
5: "2019"
6: "04"
7: "201904031554286068121005.png"]

数组的最后一个就是文件名:

代码语言:javascript
复制
console.log(file[file.length - 1]);

打印结果:

代码语言:javascript
复制
201904031554286068121005.png

这样就把图片的名称和后缀获取到了。

声明:本文由w3h5原创,转载请注明出处:《JS获取图片URL并截取文件名和后缀》 https://cloud.tencent.com/developer/article/1677571

本文已加入 腾讯云自媒体分享计划 (点击加入)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档