正則表達式怎么匹配圖片地址與img標簽

來源：懂視網責編：小采時間：2020-11-27 19:57:52

正則表達式怎么匹配圖片地址與img標簽

正則表達式怎么匹配圖片地址與img標簽:這次給大家帶來正則表達式怎么匹配圖片地址與img標簽的，正則表達式匹配圖片地址與img標簽的注意事項有哪些，下面就是實戰案例，一起來看一下。再上傳表情或者圖片地址時候很多時候不能直接上傳<img src=" " />，因此在上傳評論或者圖片

推薦度：

點擊下載本文 文檔為doc格式

導讀正則表達式怎么匹配圖片地址與img標簽:這次給大家帶來正則表達式怎么匹配圖片地址與img標簽的，正則表達式匹配圖片地址與img標簽的注意事項有哪些，下面就是實戰案例，一起來看一下。再上傳表情或者圖片地址時候很多時候不能直接上傳<img src=" " />，因此在上傳評論或者圖片

這次給大家帶來正則表達式怎么匹配圖片地址與img標簽的，正則表達式匹配圖片地址與img標簽的注意事項有哪些，下面就是實戰案例，一起來看一下。

再上傳表情或者圖片地址時候很多時候不能直接上傳<img src=" " />，因此在上傳評論或者圖片之前應該先處理一下img標簽。舉例如下，希望可以幫助更多的程序猿~

<span style="font-size:14px;">//第一步是獲取到帶有img標簽的字符串 
var str = '圖片1<img src="arclist/sanai.png">圖片2<img src="arclist/em_23.gif">圖片3<img src="arclist/451.gif">';</span>

處理獲取到的字符串

<span style="font-size:14px;">//將img標簽替換為特定編碼方式的表達式 
var reg = /<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi; 
str = str.replace(reg, "[face:$1.gif]"); 
console.log(str);</span>

運算結果為：

<span style="font-size:14px;">圖片1[face:sanai.gif]圖片2[face:em_23.gif]圖片3[face:451.gif]</span>

這樣上傳到服務器的代碼就不會存在html標簽，這是一種很好的應對帶有圖片評論且上傳信息禁止html標簽的方法。

接下來：

從服務器上返回的上一步中的運行結果，在反向解析，方法如下：

<span style="font-size:14px;">//將特定編碼方式替換成img標簽的表達式 
var regg = /
face:([\w]+).gif
/gi; 
str = str.replace(regg,"<img src='images/$1.gif' />"); 
console.log(str);</span>

運行結果為：

<span style="font-size:14px;">圖片1<img src='images/sanai.gif' />圖片2<img src='images/em_23.gif' />圖片3<img src='images/451.gif' /></span>

下面附上代碼的html頁，可以全部復制粘貼到html文件中直接運行，親測可用

<span style="font-size:14px;"><!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 </head> 
 <body> 
 <script> 
 var str = '圖片1<img src="arclist/sanai.png">圖片2<img src="arclist/em_23.gif">圖片3<img src="arclist/451.gif">'; 
 //將img標簽替換為特定編碼方式的表達式 
 var reg = /<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi; 
 str = str.replace(reg, "[face:$1.gif]"); 
 console.log(str); 
 //將特定編碼方式替換成img標簽的表達式 
 var regg = /
face:([\w]+).gif
/gi; 
 str = str.replace(regg,"<img src='images/$1.gif' />"); 
 console.log(str); 
 </script> 
 </body> 
</html></span>

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

正則表達式怎么匹配圖片地址與img標簽

推薦度：

點擊下載本文 文檔為doc格式

標簽：標簽圖片地址

熱門焦點

正則表達式怎么匹配圖片地址與img標簽

正則表達式怎么匹配圖片地址與img標簽

正則表達式怎么匹配圖片地址與img標簽

最新推薦

猜你喜歡

熱門推薦