使用正则表达式从链接中获取图片名称
更新时间：2022年05月31日 10:39:57 作者：水开泡茶
正则表达式有时可用来判断是否包含某些数据,有时可用来获取匹配数据,下面这篇文章主要给大家介绍了关于使用正则表达式从链接中获取图片名称的相关资料,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
需求介绍
后端的数据接口返回图片链接列表，前端将图片列表渲染出来，展示的时候，需要显示图片名称。如以下的图片链接，那么怎么比较快速的从链接中获取图片的名称呢？
链接例子：https://xxxxxxxx.com/Upload/File/Customer/Dtest1202/Customer/T220326-3/1_SalesOrderAttachment_File_41XV.webp?q-sign-algorithm=xxxx
分析
一般来说，图片的名称都是在链接中最后一个/之后，如果链接有携带参数，那么图片名称就是在链接中最后一个/之后、？之前。
那么无论使用什么方法，都必须满足上述条件。
链接中存在参数
链接中有参数存在， 即有？存在：这种比较简单，因为存在？这种独一无二的标志，那么需要先匹配图片名称，再匹配？所在的位置即可:
let url = 'https://xxxxxxxx.com/Upload/File/Customer/Dtest1202/Customer/T220326-3/1_SalesOrderAttachment_File_41XV.webp?q-sign-algorithm=xxxx'
// 匹配带有英文、_、.、数字的图片名称
const reg = /[\w.]+(?=\?)/g
// 匹配带有中文、英文、_、.、数字的图片名称
const regWithChinese = /[\w.\u4e00-\u9fa5]+(?=\?)/g
const result = url.match(reg)
// 若不存在符合的条件，result值为null，因此需要进行判断
const imgName = result ? result[0] : '不存在'
console.log('imgName: ', imgName);
// 输出 imgName: 1_SalesOrderAttachment_File_41XV.webp链接中不存在参数
链接中不存在参数，即没有？存在: 这种比较麻烦，没有？，那么剩下的判断条件就是图片名称处于最后一个/的之后位置了，这个有三种方法：
方法一
第一种利用/为标识，匹配所有非/的字符串，取最后一个：
const url = 'https://xxxxxxxx.com/Upload/File/Customer/Dtest1202/Customer/T220326-3/1_SalesOrderAttachment_File_41XV.webp'
const reg = /[^/]+/g
const imgName = url.match(reg).filter(item => item).pop()
console.log('imgName: ', imgName);
// 输出 imgName: 1_SalesOrderAttachment_File_41XV.webp方法二
第二种是先通过(?!.*/)找出不是以/结尾的字符串的起始位置，可以理解为最后一个/后面的位置，然后匹配字符串:
const url = 'https://xxxxxxxx.com/Upload/File/Customer/Dtest1202/Customer/T220326-3/1_SalesOrderAttachment_File_41XV.webp'
const reg = /(?!.*\/).*/g
const imgName = url.match(reg).filter(item => item).pop()
console.log('imgName: ', imgName);
// 输出 imgName: 1_SalesOrderAttachment_File_41XV.webp方法三
第三种是在前两种结合，利用/为标识，匹配所有非/的字符串，然后找出位置不是在/前面的字符串:
const url = 'https://xxxxxxxx.com/Upload/File/Customer/Dtest1202/Customer/T220326-3/1_SalesOrderAttachment_File_41XV.webp'
const reg = /[^/]+(?!.*\/)/g
const imgName = url.match(reg).filter(item => item).pop()
console.log('imgName: ', imgName);
// 输出 imgName: 1_SalesOrderAttachment_File_41XV.webp总结
到此这篇关于使用正则表达式从链接中获取图片名称的文章就介绍到这了,更多相关正则表达式链接获取图片名称内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
正则表达式是一个精巧的利器，经常用来在字符串中查找和替换，这篇文章主要介绍了js正则表达式基本语法，有兴趣的同学可以了解一下。2016-12-12
这篇文章主要介绍了 一个容易犯错的js手机号码验证正则表达式(推荐),需要的朋友可以参考下2017-03-03
十六进制是计算机中数据的一种表示方法。同我们日常中的十进制表示法不一样2012-10-10
正则表达式regular expression详述（一）...2006-06-06
本文内容, 整理自网文Finer points of PHP regular expressions. 其分析过程剥茧抽丝, 丝丝入扣, 值得一读. 该文系统地列出了PHP中正则表达式常见特性, 我只摘取其中递归部分翻译整理出来.2010-07-07
这篇文章主要介绍了使用正则表达式判断是否为手机号码(简单且实用)的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧2016-11-11
正则表达式是查找和替换文本模式的一种简洁而灵活的表示法。 在“查找和替换”窗口中执行“快速查找”、“在文件中查找”、“快速替换”或“在文件中替换”操作时，可以在该窗口的“查找内容”和“替换为”字段中使用一组专用的正则表达式2016-05-05
这篇文章主要介绍了Web前端常用正则校验规则,本文给大家整理一些常见的示例供大家学习参考，需要的朋友可以参考下2023-05-05
re.sub是个正则表达式方面的函数，用来实现通过正则表达式，实现比普通字符串的replace更加强大的替换功能。这篇文章主要介绍了正则表达式re.sub替换不完整的问题及解决方案,需要的朋友可以参考下2018-08-08
正则表达式...2007-03-03
最新评论