使用正则表达式从链接中获取图片名称（使用正则表达式提取字符串中的3个数字）真没想到

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

目录需求介绍分析链接中存在参数链接中不存在参数方法一方法二方法三总结

后端的数据接口返回图片链接列表，前端将图片列表渲染出来，展示的时候，需要显示图片名称。如以下的图片链接，那么怎么比较快速的从链接中获取图片的名称呢？

链接例子：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.一-龥]+(?=\?)/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获取超链接文本内容的正则表达式(五种方法)正则表达式，相关链接正则表达式链接替换函数的技巧