textarea禁止输入emoji表情

参考

1. segmentfault上的介绍：https://segmentfault.com/a/1190000007594620?utm_source=tuicool&utm_medium=referral
2. emoji大全权威参考（展示了不同系统上的表情样子）：http://www.unicode.org/emoji/charts/full-emoji-list.html
3. stackoverflow上的回答：https://stackoverflow.com/questions/43242440/javascript-unicode-emoji-regular-expressions/43243160#43243160
4. 阮一峰博客编码介绍：http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html

问题描述

当创建textarea标签，收集用户输入数据时，有时用户会输入emoji表情，这些表情往往通过输入法的形式添加，而不是如同微信选择表情添加，因此会在数据传输、存储和再次展示上出现问题，本文讨论从前端使用js禁止输入emoji表情。

问题原因

在Python、JavaScript 这类语言中, 对Unicode的“汉”字取长度时，长度为1。但是对于大部分的Emoji(并非全部),

取长度则为2。那么这就存在一个隐患，在对字符串进行截断时可能从中间截断, 导致字符显示乱码，

甚至引发报错。（原因分析全部来自于参考1）

解决方案

在用户输入时，使用onkeyup事件监控，当有emoji表情输入时，直接替换为空。

正则表达式常见的有2种：

var reg1=/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F\uDE80-\uDEFF]/g;

var reg2=/([\u00A9\u00AE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9-\u21AA\u231A-\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA-\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614-\u2615\u2618\u261D\u2620\u2622-\u2623\u2626\u262A\u262E-\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u2660\u2663\u2665-\u2666\u2668\u267B\u267F\u2692-\u2697\u2699\u269B-\u269C\u26A0-\u26A1\u26AA-\u26AB\u26B0-\u26B1\u26BD-\u26BE\u26C4-\u26C5\u26C8\u26CE-\u26CF\u26D1\u26D3-\u26D4\u26E9-\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733-\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2764\u2795-\u2797\u27A1\u27B0\u27BF\u2934-\u2935\u2B05-\u2B07\u2B1B-\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70-\uDD71\uDD7E-\uDD7F\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01-\uDE02\uDE1A\uDE2F\uDE32-\uDE3A\uDE50-\uDE51\uDF00-\uDF21\uDF24-\uDF93\uDF96-\uDF97\uDF99-\uDF9B\uDF9E-\uDFF0\uDFF3-\uDFF5\uDFF7-\uDFFF])|(\uD83D[\uDC00-\uDCFD\uDCFF-\uDD3D\uDD49-\uDD4E\uDD50-\uDD67\uDD6F-\uDD70\uDD73-\uDD7A\uDD87\uDD8A-\uDD8D\uDD90\uDD95-\uDD96\uDDA4-\uDDA5\uDDA8\uDDB1-\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA-\uDE4F\uDE80-\uDEC5\uDECB-\uDED2\uDEE0-\uDEE5\uDEE9\uDEEB-\uDEEC\uDEF0\uDEF3-\uDEF6])|(\uD83E[\uDD10-\uDD1E\uDD20-\uDD27\uDD30\uDD33-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4B\uDD50-\uDD5E\uDD80-\uDD91\uDDC0])/g;

textarea.onkeyup = function(){
    textarea.value = textarea.value.replace(reg2, '');
}
           

长的正则表达式来自于参考3。

备注（0920）

长的正则表达式在输入某些表情时，出现后面的文字也不能输入的情况，因此项目中暂时使用了短的正则表达式。短的正则表达式并不能禁止所有表情。