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

ShowerSun 发布于2019-08-21 17:47 / 2780人阅读

摘要：结合和简单的正则就可以实现一个文本计算函数其实当字符计算解决后，输入框限制字符数就轻而易举了。思路就是每次事件发生时，先判断当前字符数是否超过限制，如果超出，则用上一次的文本替换当前输入框的文本。

一个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("??‍?")
// ""

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

function countSymbols(string) {
    return twemoji.parse(string).replace(//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 的天坑

GPU服务器私有云文本框输入限制文本输入框文本框输入数字手机文本输入框设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90000.html

HTML常用表单标签

摘要：也可以通过和属性来设置文本域的尺寸，但是属性设置不太标准，最好的方法是通过设置。设置里默认大小的文本域实际页面效果属性用于设置文本域可见文本的行数。此外，属性也适用于文本域。 1.表单元素 HTML 表单用于收集用户输入。代码示例：常用属性解释： action属性定义在提交表单时执行的动作通常，表单会被提交到 web 服务器上的网页。在上面的例子中，指定了某个服务...

zhongmeizhi 2019-08-02 16:04 评论0 收藏0
textarea,input输入字符数限制。

摘要：但是有时候我们需要实现文本框中输入中文长度是或是，其他非中文输入是。因为中文输入法的在非正式输入时，对于我们这个算法，会出现剩余字符数为负值的情况。 textarea,input输入字符数限制。　　在做开发时，有一种需求是对输入框(input,textarea)的字数做限制。如果按照JS的规定，字符串里所有的字符，长度都是1。但是有时候我们需要实现文本框中输入中文长度是2（或是３），...

figofuture 2019-08-23 10:47 评论0 收藏0
Web聊天工具的富文本输入框

摘要：由于我们的富文本输入框比较简单，所以只需要处理两类数据即可，其一是普通的文本类型数据，包括表情其二则是图片类型数据。最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。仓库地址：chat-input-box预览地址：https://codepen.io...

iKcamp 2019-08-23 15:36 评论0 收藏0
兼顾pc和移动端的textarea字数监控的实现方法

摘要：一需求阐述和常用的解决方案制作一个文本框限制最大字数，实时监听当前已经输入的字数，并显示出来。因此单纯的监听事件显示是不够的。如果页面里需要多个文本框都要限制字数如何实现。一、需求阐述和常用的解决方案制作一个文本框限制最大字数，实时监听当前已经输入的字数，并显示出来。期初我实现这个功能的方法很简单：给textarea控件添加onkeyup事件方法，在方法中将textarea值的长度...

laznrbfe 2019-08-20 17:15 评论0 收藏0