mishe / blog

前端碰上的问题或体会
230 stars 39 forks source link

tools:emoji表情解析 #55

Open mishe opened 8 years ago

mishe commented 8 years ago

emoji表情解析

介绍

Emoji是IOS5.5+平台的原生表情应用,他本身是unicode代码,水果系统把TA美化后,展现方式有很大的改进。图标包含爱心、笑脸、食物等,又或者将这些表情任意组合。

安卓系统是并不存在这套图标字符。

在安卓和pc端的解决方案

由于emoji表情是水果特有的表情体现,因此,在安卓手机和pc端无法完美的呈现

那么要在这些设备上完美展现emoji表情的魅力,只能通过替换方式来把unicode代码转换层一个个生动的图片来解决这个问题。

emoji.js的使用

emoji表情转换的过程中,还需要过滤一些特定的html元素的内容,

默认设定:IFRAME|NOFRAMES|NOSCRIPT|SCRIPT|STYLE|TEXTAREA|INPUT|SELECT

api

提供2中方式来替换页面中的emoji表情

$(select).emoji()
$.parseEmoji(htmlContent);

页面加载完成后,一次性的替换

$('body').emoji();
$('.class').emoji()

动态加载的内容

$('body').append($.parseEmoji($('.class').html()));