用JS过滤Emoji表情的输入

Posted 2020-09-14 cnzt

本文为原创，转载请注明出处： 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...格式

 

 

本文完。