Home > Article > Backend Development > Convert smilies emoticons in forum posts to normal image display
不久前,在调用论坛回帖内容时遇到了 smilies 表情图片为 {:4_267:} ,下面说说解决方式。
在服务端时用正则将论坛(以Discuz7.2为例)帖子内容中的 smilies 图格式化成图片标签格式,然后在标签上附加上属性,以便于在视图中使用JS处理。
当然,这个可以自己去优化一下,这里起初是为了实现正常显示图片的目的。
foreach($postList as $key=>$val) { $message = preg_replace('/<i class="pstatus">.*?<\/i>(\s|(<br>))*/is', '', $val['message']); //去除 本帖最后由 XX 于 2014-11-6 15:25 编辑 //...省略其他code //论坛回帖内容中的 表情图片 $message = preg_replace('/\{\:(\d)_(\d+)\:\}/im', '<img class="smilies_n" src="" reltype="\\1" relid="\\2" height="50" style="display:none;">', $message); $postList[$key]['message'] = trim($message); }
<script src="http://domain/forumdata/cache/smilies_var.js" type="text/javascript"></script>
var smthumb = '20'; var smilies_type = new Array(); smilies_type[4] = ['炮炮兵', 'dabing'];smilies_type[5] = ['柏夫', 'bofu']; var smilies_array = new Array(); smilies_array[4] = new Array(); smilies_array[4][1] = [['267', '{:4_267:}','dabing63.gif','20','20','50'],['248', '{:4_248:}','dabing65.gif','20','20','50'],['247', '{:4_247:}','dabing69.gif','20','20','50'],['246', '{:4_246:}','dabing39.gif','20','20','50'],['245', '{:4_245:}','dabing05.gif','20','14','50'],['244', '{:4_244:}','dabing45.gif','20','20','50'],['243', '{:4_243:}','dabing16.gif','20','20','50'],['242', '{:4_242:}','dabing67.gif','20','16','50'],['241', '{:4_241:}','dabing02.gif','10','20','25'],['240', '{:4_240:}','dabing60.gif','20','17','50'],['239', '{:4_239:}','dabing46.gif','20','20','50'],['238', '{:4_238:}','dabing56.gif','20','20','50'],['237', '{:4_237:}','dabing34.gif','20','20','50'],['236', '{:4_236:}','dabing06.gif','20','20','50'],['235', '{:4_235:}','dabing10.gif','20','20','50'],['234', '{:4_234:}','dabing04.gif','20','20','50'],['233', '{:4_233:}','dabing11.gif','20','20','50'],['249', '{:4_249:}','dabing14.gif','10','20','25'],['250', '{:4_250:}','dabing54.gif','20','20','50'],['266', '{:4_266:}','dabing38.gif','20','20','50'],['265', '{:4_265:}','dabing17.gif','20','20','50'],['264', '{:4_264:}','dabing66.gif','20','20','50'],['263', '{:4_263:}','dabing64.gif','20','16','50'],['262', '{:4_262:}','dabing18.gif','20','20','50'],['261', '{:4_261:}','dabing68.gif','20','20','50'],['260', '{:4_260:}','dabing47.gif','20','20','50'],['259', '{:4_259:}','dabing41.gif','20','20','50'],['258', '{:4_258:}','dabing51.gif','20','20','50'],['257', '{:4_257:}','dabing52.gif','20','20','50'],['256', '{:4_256:}','dabing40.gif','20','20','50'],['255', '{:4_255:}','dabing50.gif','20','20','50'],['254', '{:4_254:}','dabing08.gif','20','19','50'],['253', '{:4_253:}','dabing58.gif','20','20','50'],['252', '{:4_252:}','dabing25.gif','20','20','50'],['251', '{:4_251:}','dabing57.gif','20','15','50'],['232', '{:4_232:}','dabing29.gif','20','20','50'],['231', '{:4_231:}','dabing31.gif','20','20','50'],['212', '{:4_212:}','dabing03.gif','20','20','50'],['211', '{:4_211:}','dabing01.gif','20','20','50'],['210', '{:4_210:}','dabing71.gif','20','20','50']]; smilies_array[4][2] = [['209', '{:4_209:}','dabing55.gif','20','17','50'],['208', '{:4_208:}','dabing53.gif','20','20','50'],['207', '{:4_207:}','dabing22.gif','20','20','50'],['206', '{:4_206:}','dabing28.gif','20','20','50'],['205', '{:4_205:}','dabing36.gif','20','20','50'],['204', '{:4_204:}','dabing48.gif','20','20','50'],['203', '{:4_203:}','dabing42.gif','20','20','50'],['202', '{:4_202:}','dabing12.gif','20','20','50'],['201', '{:4_201:}','dabing33.gif','20','20','50'],['200', '{:4_200:}','dabing20.gif','20','20','50'],['199', '{:4_199:}','dabing44.gif','20','20','50'],['198', '{:4_198:}','dabing23.gif','20','20','50'],['197', '{:4_197:}','dabing07.gif','20','20','50'],['213', '{:4_213:}','dabing43.gif','20','20','50'],['214', '{:4_214:}','dabing72.gif','20','20','50'],['230', '{:4_230:}','dabing19.gif','20','20','50'],['229', '{:4_229:}','dabing59.gif','20','20','50'],['228', '{:4_228:}','dabing27.gif','20','20','50'],['227', '{:4_227:}','dabing21.gif','20','20','50'],['226', '{:4_226:}','dabing30.gif','20','20','50'],['225', '{:4_225:}','dabing24.gif','20','20','50'],['224', '{:4_224:}','dabing13.gif','20','20','50'],['223', '{:4_223:}','dabing37.gif','20','20','50'],['222', '{:4_222:}','dabing62.gif','19','20','46'],['221', '{:4_221:}','dabing70.gif','20','20','50'],['220', '{:4_220:}','dabing09.gif','20','20','50'],['219', '{:4_219:}','dabing15.gif','16','20','39'],['218', '{:4_218:}','dabing61.gif','20','20','50'],['217', '{:4_217:}','dabing26.gif','20','20','50'],['216', '{:4_216:}','dabing35.gif','20','20','50'],['215', '{:4_215:}','dabing49.gif','20','20','50'],['196', '{:4_196:}','dabing32.gif','20','20','50']]; smilies_array[5] = new Array(); ...在视图中将下面的 JS放在末尾,否则会因加载顺序导致没能获取到dom或smilies_var.js中的数组而报错。
var baseSrc = 'http://domain/images/smilies/'; //smilies_var.js中的图片存放地址 var OSmilies = $('.smilies_n'); //所有class名为 .smilies_n 标签 var i, flag, OEle, OAttr, OId, OName, OArr; for(i=0;i<OSmilies.length;i++) { flag = false; if(OSmilies[i] == undefined) continue; OEle = $(OSmilies[i]); //第几个标签 OAttr = OEle.attr('reltype');//标签的属性值 OId = parseInt(OEle.attr('relid')); if( smilies_type[OAttr] == undefined || smilies_array[OAttr] == undefined || OId <= 0 ) continue; OName = smilies_type[OAttr][1]; //type的名称 dabing、bofu OArr = smilies_array[OAttr]; //存放图片名的大数组 for(sj=1;sj<OArr.length;sj++) { if(flag) break; //若找到了 OId对应的图片,退出当前OId的循环 for(j=0;j<OArr[sj].length;j++) { if( OArr[sj][j][0] == OId ) { OEle.attr('src', baseSrc + OName + '/' + OArr[sj][j][2]); OEle.show(); flag = true; break; } } } }
以上就介绍了将论坛帖子内容中的 smilies 表情转换为正常图片显示,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。