使用正規表示式從連結中獲取圖片名稱

2022-05-31 14:00:43

需求介紹

後端的資料介面返回圖片連結列表，前端將圖片列表渲染出來，展示的時候，需要顯示圖片名稱。如以下的圖片連結，那麼怎麼比較快速的從連結中獲取圖片的名稱呢？

連結例子：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

總結

到此這篇關於使用正規表示式從連結中獲取圖片名稱的文章就介紹到這了,更多相關正規表示式連結獲取圖片名稱內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

使用正規表示式從連結中獲取圖片名稱

目錄

需求介紹

分析

連結中存在引數

連結中不存在引數

方法一

方法二

方法三

總結

熱門文章