更新于 2017-11-17
使用場景：
客戶端的評論信息础钠，包含 emoji 數據钙皮，獲取并顯示在 web 頁面中
使用到的插件：
js-emoji - Display emoji in the browser, everywhere
所需資源：
- emoji.css
- emoji.min.js
- img-apple-64 系列 emoji 圖片（不固定缠借，自己選擇眶熬，資源地址在此）
代碼示例：
<link href="emoji.css" rel="stylesheet" type="text/css" />
<script src="emoji.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 初始化
var emoji = new EmojiConvertor();
// 設置指向 emoji 圖片的地址 (requires trailing slash)
// you can grab the images from the emoji-data link here:
// https://github.com/iamcal/js-emoji/tree/master/build
emoji.img_sets.apple.path = '/plugins/js-emoji/emoji-data/img-apple-64/';
/**
* If the platform supports native emoticons, use those instead
* of the fallbacks.
* 如果平臺支持原生表情解析信不，使用原生表情而不是回退的圖片形式
* 默認：emoji.allow_native = true;
*/
// false 設置默認都使用圖片形式屈溉，如果 true 的話，在 ios 系統(tǒng)下會默認使用原生的表情
// 在頁面置于 app 客戶端 webview 中時姐扮，部分 ios 機型無法正確識別原生表情
emoji.allow_native = false;
/**
* [emojiTransfer 轉換評論中的表情]
* @author Alexee
* @date 2017-07-17
* @param {[string]} data [html字符串數據]
* @return {[string]} newData [處理過的html字符串數據]
*/
function emojiTransfer(data) {
// 篩選出 emoji unicode 的正則絮供，具體看你們的后端人員如何存儲的 emoji 數據
// ...[emoji:d83dde02]... => s:[emoji:d83dde02] match:d83dde02
var newData = data.replace(/\[emoji:([^\s\[]+?)\]/g, function(s, match) {
// d83dde02 => us:d83d umatch:d83d; us:de02 umatch:de02
var uData = match.replace(/(\S{4})/g, function(us, umatch) {
return '\\u' + umatch;
});
// unicode 轉中文，可以在 web 中顯示 web 版 emoji
var zh = eval("'" + uData + "'");
// 是否只在 pc 端進行 emoji 的轉換
// 移動端對于 emoji 的顯示會有差異性（ios android emoji 識別不同）
// if (!browser.versions.ios && !browser.versions.android) {
// replaces \u{1F604} with platform appropriate content
var output = emoji.replace_unified(zh);
return output;
// } else {
// return zh;
// }
});
return newData;
}
// 方法調用
// 處理某段 html 內容
var $content = $('.content .info');
$content.html(emojiTransfer($content.html()));
</script>
效果如圖：
未處理前的 html
處理后的 html
頁面的顯示效果
