使用正则表达式从链接中获取图片名称
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">需求介绍</a></li><li><a href="#_label1">分析</a></li><li><a href="#_label2">链接中存在参数</a></li><li><a href="#_label3">链接中不存在参数</a></li><ul class="second_class_ul"><li><a href="#_lab2_3_0">方法一</a></li><li><a href="#_lab2_3_1">方法二</a></li><li><a href="#_lab2_3_2">方法三</a></li></ul><li><a href="#_label4">总结</a></li><ul class="second_class_ul"></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>需求介绍</h2><p>后端的数据接口返回图片链接列表，前端将图片列表渲染出来，展示的时候，需要显示图片名称。如以下的图片链接，那么怎么比较快速的从链接中获取图片的名称呢？</p>
<blockquote><p>链接例子：https://xxxxxxxx.com/Upload/File/Customer/Dtest1202/Customer/T220326-3/1_SalesOrderAttachment_File_41XV.webp?q-sign-algorithm=xxxx</p></blockquote>
<p class="maodian"><a name="_label1"></a></p><h2>分析</h2>
<p>一般来说，图片的名称都是在链接中最后一个<code>/</code>之后，如果链接有携带参数，那么图片名称就是在链接中最后一个<code>/</code>之后、<code>？</code>之前。</p>
<p>那么无论使用什么方法，都必须满足上述条件。</p>
<p class="maodian"><a name="_label2"></a></p><h2>链接中存在参数</h2>
<p>链接中有参数存在， 即有<code>？</code>存在：这种比较简单，因为存在<code>？</code>这种独一无二的标志，那么需要先匹配图片名称，再匹配<code>？</code>所在的位置即可:</p>
<div class="jb51code"><pre class="brush:js;">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 : '不存在'
console.log('imgName: ', imgName);
// 输出 imgName: 1_SalesOrderAttachment_File_41XV.webp</pre></div>
<p class="maodian"><a name="_label3"></a></p><h2>链接中不存在参数</h2>
<p>链接中不存在参数，即没有<code>？</code>存在: 这种比较麻烦，没有<code>？</code>，那么剩下的判断条件就是图片名称处于最后一个<code>/</code>的之后位置了，这个有三种方法：</p>
<p class="maodian"><a name="_lab2_3_0"></a></p><h3>方法一</h3>
<p>第一种利用<code>/</code>为标识，匹配所有非<code>/</code>的字符串，取最后一个：</p>
<div class="jb51code"><pre class="brush:js;">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</pre></div>
<p class="maodian"><a name="_lab2_3_1"></a></p><h3>方法二</h3>
<p>第二种是先通过<code>(?!.*/)</code>找出不是以<code>/</code>结尾的字符串的起始位置，可以理解为最后一个<code>/</code>后面的位置，然后匹配字符串:</p>
<div class="jb51code"><pre class="brush:js;">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</pre></div>
<p class="maodian"><a name="_lab2_3_2"></a></p><h3>方法三</h3>
<p>第三种是在前两种结合，利用<code>/</code>为标识，匹配所有非<code>/</code>的字符串，然后找出位置不是在<code>/</code>前面的字符串:</p>
<div class="jb51code"><pre class="brush:js;">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</pre></div>
<p class="maodian"><a name="_label4"></a></p><h2>总结</h2>
頁:
[1]