使用正则表达式从链接中获取图片名称
更新时间：2022年05月31日 10:39:57 作者：水开泡茶
正则表达式有时可用来判断是否包含某些数据,有时可用来获取匹配数据,下面这篇文章主要给大家介绍了关于使用正则表达式从链接中获取图片名称的相关资料,需要的朋友可以参考下
需求介绍
后端的数据接口返回图片链接列表，前端将图片列表渲染出来，展示的时候，需要显示图片名称。如以下的图片链接，那么怎么比较快速的从链接中获取图片的名称呢？
链接例子：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总结
到此这篇关于使用正则表达式从链接中获取图片名称的文章就介绍到这了,更多相关正则表达式链接获取图片名称内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了php验证用户名是否以字母开头与验证密码,实例汇总了几个用户注册及提交表单时常用的正则表达式,非常具有实用价值,需要的朋友可以参考下2014-12-12
grep （缩写来自Globally search a Regular Expression and Print）是一种强大的文本搜索工具，它能使用特定模式匹配（包括正则表达式）搜索文本，并默认输出匹配行2020-03-03
正则表达式，大家在开发中应该是经常用到，现在很多开发语言都有正则表达式的应用，比如javascript，java，.net,php等等，我今天就把我对正则表达式的理解跟大家唠唠，不当之处，请多多指教2012-03-03
正则表达式Regular Expression （RegExp）详解
正则表达式，又称正规表示式、正规表示法、正规表达式、规则表达式、常规表示法（英语：Regular Expression，在代码中常简写为regex、regexp或RE2015-11-11
DreamWeaver中使用正则技术搜索...2007-01-01
正则表达式是一个查询的字符串，它包含一般的字符和一些特殊的字符，特殊字符可以扩展查找字符串的能力，正则表达式在查找和替换字符串的作用不可忽视，它能很好提高工作效率。2009-08-08
正则表达式在java程序中应用非常广泛，本文给大家介绍java正则表达式过滤字母、数字和中文，本文代码讲解的非常详细，非常具有参考价值，感兴趣的朋友快来看看吧2015-10-10
正则表达式是一种可以用于模式匹配和替换的规范，一个正则表达式就是由普通的字符（例如字符a到z）以及特殊字符（元字符）组成的文字模式，它 用以描述在查找文字主体时待匹配的一个或多个字符串。2015-09-09
首先要记住的是: 正则表达式与通配符不一样,它们表示的含义并不相同!2012-09-09
本篇文章主要给大家介绍java在正则表达式的使用，本篇文章给大家主要介绍应用点在抓取网页中的email地址和代码统计，感兴趣的朋友一起看看吧2015-09-09
最新评论