用JS過濾Emoji表情的輸入

本文爲原創，轉載請註明出處： cnzt       文章：cnzt-p

http://www.cnblogs.com/zt-blog/p/6773854.html 

 

在前端頁面開發過程當中，總會碰到不容許輸入框輸入emoji表情的需求，個人思路是經過編碼用正則匹配表情，而後將其替換爲空字符創。可是問題也是顯而易見的，完整的編碼集是什麼呢？查閱了官方文檔，發現上面並無給出想要的答案。而且不少emoji表情除了主編碼還有副編碼（這是我給取的名字），舉個例子：

　　\uD83C\uDC00是一個表情，\uD83C\uDC00\u200D又是一個表情，我把\uD83C\uDC00稱爲主編碼，\u200D稱爲副編碼（或者衍生編碼，反正意思理解了就行）。

 

--------------------------接下來漫長的手動測試編碼集的過程--------------------------

 

最終解決方案以下：

1 var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
2 var org_val = $("input").val();
3 
4 if(regStr.test(org_val)){
5 　　$("#input").val(org_val.replace(regStr,""));
6 }

 

上面的正則能夠匹配iOS10.2.1及以前的所有emoji表情，Android的表情由於比較多，如上面的正則有遺漏，可自行補充。測試一個表情的編碼方法以下：

1 <input type="text" />
2 
3 
4 var org_val = $("input").val();
5 console.log(escape(org_val));
6 //escape獲得%uD83C%u.........格式的編碼，可對應成\u...格式

 

 

本文完。