再上傳表情或者圖片地址時候很多時候不能直接上傳img src=" " />，因此在上傳評論或者圖片之前應(yīng)該先處理一下img標(biāo)簽。舉例如下，希望可以幫助更多的程序猿~
span style="font-size:14px;">//第一步是獲取到帶有img標(biāo)簽的字符串
var str = '圖片1img src="arclist/sanai.png">圖片2img src="arclist/em_23.gif">圖片3img src="arclist/451.gif">';/span>
處理獲取到的字符串
span style="font-size:14px;">//將img標(biāo)簽替換為特定編碼方式的表達(dá)式
var reg = /img[^>]*src[=\"\'s]+[^\.]*/([^\.]+).[^\"\']+[\"\']?[^>]*>/gi;
str = str.replace(reg, "[face:$1.gif]");
console.log(str);/span>
運(yùn)算結(jié)果為：
span style="font-size:14px;">圖片1[face:sanai.gif]圖片2[face:em_23.gif]圖片3[face:451.gif]/span>
這樣上傳到服務(wù)器的代碼就不會存在html標(biāo)簽，這是一種很好的應(yīng)對帶有圖片評論且上傳信息禁止html標(biāo)簽的方法。
接下來：
從服務(wù)器上返回的上一步中的運(yùn)行結(jié)果，在反向解析，方法如下：
span style="font-size:14px;">//將特定編碼方式替換成img標(biāo)簽的表達(dá)式
var regg = /
face:([\w]+).gif
/gi;
str = str.replace(regg,"img src='images/$1.gif' />");
console.log(str);/span>
運(yùn)行結(jié)果為：
span style="font-size:14px;">圖片1img src='images/sanai.gif' />圖片2img src='images/em_23.gif' />圖片3img src='images/451.gif' />/span>
下面附上代碼的html頁，可以全部復(fù)制粘貼到html文件中直接運(yùn)行，親測可用
span style="font-size:14px;">!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>/title>
/head>
body>
script>
var str = '圖片1img src="arclist/sanai.png">圖片2img src="arclist/em_23.gif">圖片3img src="arclist/451.gif">';
//將img標(biāo)簽替換為特定編碼方式的表達(dá)式
var reg = /img[^>]*src[=\"\'\s]+[^\.]*/([^\.]+).[^\"\']+[\"\']?[^>]*>/gi;
str = str.replace(reg, "[face:$1.gif]");
console.log(str);
//將特定編碼方式替換成img標(biāo)簽的表達(dá)式
var regg = /
face:([\w]+).gif
/gi;
str = str.replace(regg,"img src='images/$1.gif' />");
console.log(str);
/script>
/body>
/html>/span>
以上兩種方法很好的解決的對img標(biāo)簽的正反運(yùn)算，第一種方法為之前收集，不記得原作者，如有冒犯可以提出署名。后一種方法為本人自寫，存在一定的局限性，歡迎大家討論~
以上所述是小編給大家介紹的正則表達(dá)式處理圖片地址、img標(biāo)簽的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- 用正則表達(dá)式替換圖片地址img標(biāo)簽
- JavaScript正則表達(dá)式替換字符串中圖片地址(img src)的方法
- 正則表達(dá)式提取img的src
- php正則表達(dá)式匹配img中任意屬性的方法
