Home  >  Article  >  Backend Development  >  Convert smilies emoticons in forum posts to normal image display

Convert smilies emoticons in forum posts to normal image display

WBOY
WBOYOriginal
2016-08-08 09:30:461455browse

不久前,在调用论坛回帖内容时遇到了 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);
}

接下来在视图中引入 smilies_var.js文件

<script src="http://domain/forumdata/cache/smilies_var.js" type="text/javascript"></script>

这个JS文件的内容大概如下

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中的数组而报错。
这里使用的是 jQuery来操作

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;
			}
		}
	}
}

以上就可以对论坛内容中的表情图片转换,关于其他的BbCode后续整理了再发。

以上就介绍了将论坛帖子内容中的 smilies 表情转换为正常图片显示,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn