如何实现emoji文本字数计算?以及输入框限制指定字符数?

bestar

一个emoji文本用javascript该如何正确计算其文本长度?
最容易想到的自然是用length来求长度。以下列举常见emoji和复杂emoji。

// size: 2
"?".length
// size: 7
"??‍?".length

由于JavaScript的字符编码问题,自然行不通。详情请参见文章末尾的博文。
基于常见的emoji可以使用以下正则匹配。

// 匹配UTF-16的代理对,把代理对改为一个BMP的字符
function countSymbols(string) {
    var regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
    return string.replace(regexAstralSymbols, '_').length;
}
countSymbols("?"); //  size: 1
countSymbols("??‍?"); // size: 4

但是仍然出现了问题。那么一些更复杂的emoji表情的时候,还是挂掉了。??‍?这个表情其实是苹果中表情农民,在Full Emoji List, v5.0里第218个表情。此表情由U+1F468 U+1F3FC U+200D U+1F33E组成。所以直接求长度为 2 + 2 + 1 + 2 = 7。这也在所难免了。

那么该做如何解?

这时候社区里有twitter的关于emoji的一个工具库twemoji,利用这个工具库,可以方便的实现emoji文本的实现。

twemoji.parse("??‍?")
// "<img class="emoji" draggable="false" alt="??‍?" src="https://twemoji.maxcdn.com/2/72x72/1f468-1f3fc-200d-1f33e.png"/>"

因此可见。twemoji正确的识别了并达到了我们的预期。用户任意输入一个emoji,我们都只计算为一个长度。利用twemoji解析emoji并返回图片的特性,结合正则可以实现一个函数。

function countSymbols(string) {
    return twemoji.parse(string).replace(/<img.+?\/>/g, '_').length;
}
countSymbols("?"); //  size: 1
countSymbols("??‍?"); // size: 1

好的问题解决了。结合twemoji和简单的正则就可以实现一个文本计算函数

countSymbols("??‍? and ? parse correctly!"); // size: 24

其实当字符计算解决后,输入框限制字符数就轻而易举了。思路就是每次input事件发生时,先判断当前字符数是否超过限制,如果超出,则用上一次的文本替换当前输入框的文本。大致代码如下。

var prevText = '';
var textarea = document.getElementById('input-area');
var limit = 250;
function limitTextSize(){
    var text = textarea.value;
    var size = countSymbols(text);
    if(size > limit) {
        textarea.value = prevText;
    } else {
        prevText = text;
    }
}

希望能给大家带来点帮助。求点赞哈哈~


Unicode与JavaScript详解
Emoji.prototype.length —— Unicode 字符那些事儿
JavaScript 有个 Unicode 的天坑

阅读 6.6k

一公斤的箱子
千山万水,无数黑夜,等一轮明月

-- 念念不忘,必有回响 --

99 声望
2 粉丝
0 条评论

-- 念念不忘,必有回响 --

99 声望
2 粉丝
文章目录
宣传栏