将论坛帖子内容中的 smilies 表情转换为正常图片显示

不久前，在调用论坛回帖内容时遇到了 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后续整理了再发。