网页上显示emoji方案

  • Post author:
  • Post category:其他





MySQL数据里不能直接存储emoji表情字符,我们采取的是存储emoji表情的unified的码。格式为:u开始unified码中间:终结。





首先唯一确定emoji表情如何显示的是emoji码,而HTML又不支持直接显示emoji表情。于是采取背景图片的方式显示。CSS文件指定图片显示的位置,从而确定unified和图片的一对一关系。





网页上显示emoji方案





网页上显示emoji方案




<link rel=”stylesheet” type=”text/css” media=”all” href=”emoji.css” />



<span class=”emoji emoji1f60a”></span>



就可以显示emoji表情在HTML页面上了。




从数据库读出内容,然后渲染到div,div赋予类名has_emoji,在文档加载完后对所有class为has_emoji的div进行emoji表情替换操作。div表情替换操作的算法如下:




$(“.has_emoji”).each(function(){




var param = $(this).html();



//B用来替换:u,D用来替换:



var B = “<span class=’emoji emoji”;



var D = “‘></span>”;



//从第一个字符开始遍历



var compare = -1;



while(param.indexOf(“:u”)>compare){//继续遍历,寻找:u



//记录:u的位置,并把下次遍历开始的位置后移



var usite=param.indexOf(“:u”);



compare = usite;



//如果符合格式进行格式替换,:u和:换为相应的HTML标签,unified转小写



if(param.length>usite+7&&param.charAt(usite+7)==’:’){




var A = param.substring(0,usite);



var C = param.substring(usite+2,usite+7).toLowerCase();;



var E = param.substring(usite+8,param.length);



param = A+B+C+D+E;



}



}



$(this).html(param);



})



Miss:u1F334:Girl:u1F334:皮裤加绒加厚:u1F60A:有大小码,喜欢加我微信p3163849882



经过处理成为:



Miss<span class=”emoji emoji1f334″></span>Girl<span class=”emoji emoji1f334″></span>皮裤加绒加厚<span class=”emoji emoji1f60a”></span>有大小码,喜欢加我微信p3163849882



网页上显示emoji方案



版权声明:本文为abcmaopao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。