再上傳表情或者圖片地址時候很多時候不能直接上傳 <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>

以上兩種方法很好的解決的對img標籤的正反運算，第一種方法為之前收集，不記得原作者，如有冒犯可以提出署名。後一種方法為本人自寫，存在一定的侷限性，歡迎大家討論~

以上所述是小編給大家介紹的正規表示式處理圖片地址、img標籤的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。

正規表示式處理圖片地址、img標籤的方法

相關文章