web前端emoji表情

通常作為前端，我們接收到的表情不會是一張，而是類似 :smile : 、[微笑]、/微笑這樣的字串，那麼如何將字串轉換為對應的表情就是問題的關鍵。毋庸置疑，通過正規表示式對相應的字串作匹配替換，從而將對應的emoji表情顯示出來是比較好的乙個方法。

首先，本地要有乙個emoji表情庫，類似

其次：匹配，就免不了要用到正規表示式，針對不同的表情字串，需要寫不同的匹配規則。如需匹配[微笑]或者/微笑格式的表情，對應的正則如下

//對於元字元 如  {} + ? 等，需要轉義
varreg
=new
regexp("
\\["
+emoji
.name+"
\\]|
\\/"
+emoji
.name
,"gm"
);

寫好了匹配規則，接下來要對需要轉換的字串進行替換。 replace()很好的幫我們解決了這個問題。

var
result
=input
.replace
(reg
,');

那麼問題來了，在這兩行code中，用到了emoji.name,emoji.src，這個emoji物件到底是個什麼樣的東西。其實這個emoji物件相當於乙個emoji配置，他的code長這個樣子：

var
emojis=[,
,]

我們用到的emoji則是其中的乙個個物件。最後，我們需要迴圈這個陣列，將每個對應的字串匹配成對應的表情。完整**如下：

function
filteremoji
(input
,emoji
)function
emoji
($sce));
//這裡由於angular的安全限制，使用$sce將匹配到的表情轉換為可識別的標籤。
return
$sce
.trustashtml
(input
);};
}

最後，在需要轉換表情的地方，加上這個emoji過濾器就ok了。

當然，這種方法有乙個弊端就是需要載入很多的emoji表情，可以優化為用一張雪碧圖去搞定。在寫法上也要有一些變化。首先肯定不能再通過

.emoji .emoji.emoji_dai .emoji.emoji_smile

emojis也需要做一些修改

var
emojis=[,
]

匹配函式修改為：

function
filteremoji
(input
,emoji
)

最後，乙個完整的emoji表情匹配到底結束。

詳情關注部落格

前端輸入Emoji表情導致的錯誤

使用者輸入了emoji表情，提交的時候因為後端沒有儲存相應的emoji字元編碼，導致報錯異常。原因 unicode定義的emoji是四個字元，對於一些之前沒有考慮過emoji表情的系統來說，其獲取或者展示簡直就是災難。公司用的mysql,其utf8字符集最多支援三個字元。regemorule ud8...

使用EMOJI表情

由於ios系統支援日文中的字塊編碼，所以在uilable，uitextfield，uialertview等控制項中使用emoji表情編碼 emoji就是表情符號詞義來自日語 e moji，moji在日語中的含義是字元例如 plain view plain copy nsstring s nsst...

mysql 儲存emoji表情

phenomenon 當儲存帶emoji表情的資料時，mysql提示儲存失敗。solution 更改對應欄位的字符集 alter table xx modify columnremarkvarchar 256 character set utf8mb4 collate utf8mb4 unicode...

web前端emoji表情

前端輸入Emoji表情導致的錯誤

使用EMOJI表情

mysql 儲存emoji表情

相關推薦