平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“采用正则表达式从链接中获取图片名称”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。
需求介绍
实际处理时，后端的数据接口得到图片链接列表，前端将图片列表渲染出来，展示的时候，需显示图片名称。如以下的图片链接，那么怎么比较更快的从链接中拿到图片的名称呢？
链接例子：（链接已移除）
分析
实际处理时，一般来说，图片的名称都是在链接中最后一个/之后，如果链接有携带参数，那么图片名称就是在链接中最后一个/之后、？之前。
那么无论采用什么方法，都必须满足上述条件。
链接中存在参数
链接中有参数存在， 即有？存在：这种比较轻松，因为存在？这种独一无二的标志，那么需先匹配图片名称，再匹配？所在的位置即可:
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
总结
到此这篇关于采用正则表达式从链接中拿到图片名称的文章就介绍到这了,更多相关正则表达式链接拿到图片名称内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！
您可能感兴趣的文章:
- 正则表达式,提取网页中的链接地址
- php 正则表达式提取网页超级链接url的函数
- php正则表达式取得内容所有链接的方法
- php正则表达式拿到内容所有链接
- php拿到超链接文本内容的正则表达式(五种方法)
- 正则表达式，相关链接
- 正则表达式链接替换函数的技巧
