使用正则表达式从链接中获取图片名称

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

需求介绍

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

链接例子：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

总结

到此这篇关于使用正则表达式从链接中获取图片名称的文章就介绍到这了,更多相关正则表达式链接获取图片名称内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 正则表达式，相关链接

    正则表达式，相关链接

    正则表达式,相关链接   http://blog.csdn.net/laily/category/19548.aspx http://blog.csdn.net/laily/archive/2004/06/30/30525.aspx 微软的正则表达式教程(五):选择/编组和后向引用 http://blog.csdn.net/laily/archive/2004/06/30/30522.aspx 微软的正则表达式教程(四):限定符和定位符 http://blog.csdn.ne?琼?渦獢p????

  • 正则表达式链接替换函数的技巧

    正则表达式链接替换函数的技巧如下所示: 1) 字符串       前面的字符<a href="http://www.aaa.cn/000011.html">任意长度字符</a>后面的字符 替换成        前面的字符<a href="http://www.bbb.cn/folder/show.asp?id=000011">任意长度字符</a>后面的字符 2) 字符串       前面的字符<a href=&q

  • 正则表达式,提取网页中的链接地址

    <td class=cate width="45%" style="word-break:break-all">       <a class=M href="http://jmfengcai.cn.alibaba.com/athena/companydetail/jmfengcai.html" onMouseDown="return aliclick(this,'?alishop=companylistcompany

  • php 正则表达式提取网页超级链接url的函数

    复制代码 代码如下: function match_links($document) { preg_match_all("'<\s*a\s.*?href\s*=\s*([\"\'])?(?(1)(.*?)\\1|([^\s\>]+))[^>]*>?(.*?)</a>'isx",$document,$links); while(list($key,$val) = each($links[2])) { if(!empty($val)) $mat

  • php正则表达式取得内容所有链接的方法

    本文实例讲述了php正则表达式取得内容所有链接的方法.分享给大家供大家参考.具体如下: 这里提供二款关于php正则链接的方法,他们可以取得内容所有链接并且保存到一个数组,当然也可以把链接全部替换. 方法一,代码如下: 复制代码 代码如下: function get_all_url($code){          preg_match_all('/<as+href=["|']?([^>"' ]+)["|']?s*[^>]*>([^>]+)<

  • php获取超链接文本内容的正则表达式(五种方法)

    废话不多说了,直接跟大家分享五种方法,通过代码讲解php获取超链接文本内容的正则表达式. //方法一 preg_match_all("/<(a|a)[s]{0,1}[w=":()]*>[ ]*(check user)[ ]*</(a|a)>/i",$string,$matches); //方法二 preg_match_all("/<a[dd]*>check user</a>/i",$string,$match

  • php正则表达式获取内容所有链接

    方法一: function get_all_url($code){ preg_match_all('/<as+href=["|']?([^>"' ]+)["|']?s*[^>]*>([^>]+)</a>/i',$code,$arr); return array('name'=>$arr[2],'url'=>$arr[1]); } 方法二: /** * date 2015-07-24 **/ $site=substr($ur

  • 使用正则表达式从链接中获取图片名称

    目录 需求介绍 分析 链接中存在参数 链接中不存在参数 方法一 方法二 方法三 总结 需求介绍 后端的数据接口返回图片链接列表,前端将图片列表渲染出来,展示的时候,需要显示图片名称.如以下的图片链接,那么怎么比较快速的从链接中获取图片的名称呢? 链接例子:https://xxxxxxxx.com/Upload/File/Customer/Dtest1202/Customer/T220326-3/1_SalesOrderAttachment_File_41XV.webp?q-sign-algori

  • python使用正则表达式分析网页中的图片并进行替换的方法

    本文实例讲述了python使用正则表达式分析网页中的图片并进行替换的方法.分享给大家供大家参考.具体分析如下: 这段代码分析网页中的所有图片表单<img>,分析后为其前后添加相应的修饰标签,并添加到图片的超级链接. 复制代码 代码如下: result = value.replace("[ page ]","").replace('  ',u' ') p=re.compile(r'''(<img\b[^<>]*?\bsrc[\s\t\r\

  • 解决Android从相册中获取图片出错图片却无法裁剪问题的方法

    解决Android从相册中获取图片出错图片却无法裁剪问题的方法

    在学习获取相册中图片进行裁剪的时候遇到了比较大的问题,在纠结了近半天才真的解决,下面分享一下学习经验. 问题: 选择了相册中的图片之后要进入图片裁剪的时候出错,(华为)手机提示"此图片无法获取",经百度后,明白是版本不同导致的URI的问题的问题,原文如下: 4.3或以下,选了图片之后,根据Uri来做处理,很多帖子都有了,我就不详细说了.主要是4.4,如果使用上面pick的原生方法来选图,返回的uri还是正常的,但如果用ACTION_GET_CONTENT的方法,返回的uri跟4.3是完

  • Python中获取图片的大小问题

    目录 Python获取图片的大小 安装Pillow 本地图片 远程图片 Python不加载图片获取尺寸 解释 例子 Python获取图片的大小 了解过Pillow的都知道,Pillow是一个非常强大的图片处理器,这篇文章主要记录一下Pillow对图片信息的获取: 安装Pillow pip install pillow 本地图片 import os from PIL import Image path = os.path.join(os.getcwd(),"23.png") img =

  • C#正则表达式匹配HTML中的图片路径，图片地址代码

    一般来说一个 HTML 文档有很多标签,比如"<html>"."<body>"."<table>"等,想把文档中的 img 标签提取出来并不是一件容易的事.由于 img 标签样式变化多端,使提取的时候用程序寻找并不容易.于是想要寻找它们就必须写一个非常健全的正则表达式,不然有可能会找得不全,或者找出来的不是正确的 img 标签.我们可以从 HTML 标签的格式去想应该怎么建这个正则表达式.首先要想一下 img

  • Winform中实现图片格式转换

    Winform中实现图片格式转换

    场景 选择一张照片并选择保存位置和要转换的图片格式实现图片格式转换. 项目运行效果 实现 新建一个窗体页面,然后设计页面布局如下 选择图片按钮点击事件中 private void toolStripButton3_Click(object sender, EventArgs e)//选择转换文件的按钮 { if (openFileDialog1.ShowDialog() == DialogResult.OK) //判断是否选择文件 { listView1.Items.Clear(); //清空l

  • Python提取PDF中的图片的实现示例

    Python提取PDF中的图片的实现示例

    目录 1.导入相关库 2.具体实现 2.1.使用正则表达式查找PDF中的图片 2.2.打印PDF的相关信息 2.3.遍历PDF中的对象,遇到是图像才进行下一步,不然就continue 2.4.将图像存为png格式 2.5.输入pdf路径,即可运行 3.结果预览 3.1.程序结果 3.2.原本的pdf 3.3.提取出来的图片 1.导入相关库 import fitz import time import re import os 2.具体实现 为了方便和其他模块组合,我直接写了个函数完成这个功能,实

  • Android从系统Gallery获取图片具体实现

    Android从系统Gallery获取图片具体实现

    前言 在Android应用中,经常有场景会需要使用到设备上存储的图片,而直接从路径中获取无疑是非常不便利的.所以一般推荐调用系统的Gallery应用,选择图片,然后使用它.本篇博客将讲解如何在Android中通过系统Gallery获取图片. Gallery应用 Android原生内置了很多App,而Gallery为图库,用于操作设备上的图片,它会在开机的时候主动扫描设备上存储的图片,并可以使用Gallery操作它们.既然要使用Gallery,那么先看看它的AndroidManifest.xml清

  • Android远程获取图片并本地缓存

    对于客户端--服务器端应用,从远程获取图片算是经常要用的一个功能,而图片资源往往会消耗比较大的流量,对应用来说,如果处理不好这个问题,那会让用户很崩溃,不知不觉手机流量就用完了,等用户发现是你的应用消耗掉了他手机流量的话,那么可想而知你的应用将面临什么样的命运. 另外一个问题就是加载速度,如果应用中图片加载速度很慢的话,那么用户同样会等到崩溃. 那么如何处理好图片资源的获取和管理呢? *异步下载 *本地缓存 1.异步下载: 大家都知道,在android应用中UI线程5秒没响应的话就会抛出无响应异

  • php中通过正则表达式下载内容中的远程图片的函数代码

    这段程序其实是属于"小偷程序"的重要部分. 这一段程序只是下载远程图片的那一段而已,程序写的比较简单,大多部分都做了注释. 复制代码 代码如下: if (preg_match_all("/http://[^ "']+[.jpg|.gif|.jpeg|.png]+/ui",stripcslashes($content),$aliurl)){ $i=0; //多个文件++ while(list($key ,$v) = each($aliurl[0])){ //

随机推荐