如何实现emoji文本字数计算?以及输入框限制指定字符数?
一个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 的天坑
如何实现emoji文本字数计算?以及输入框限制指定字符数?相关推荐
- java操作txt文本(一):遇到指定字符换行
想法由来:有时查看网页源代码的css文件内容,竟是恼人的压缩后代码(不换行),如下图所示-- 它的可读性很差,所以写了下面这个简单的程序,实现自动换行. 适用条件:遇到指定字符换行(本例中遇到'}'换 ...
- html 实时计算字数,JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决...
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
- JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决...
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
- 输入框实时字数计算移动端bug解决
作者:旺仔 如上图所示的输入框的字体计算在各大网站上是在熟悉不过的了,当然在pc端制作起来也是相当简单,只要捕捉键盘事件对输入框中的字数进行获取,再用限制字数减去获取的字数便可以实时计算出" ...
- 前端中文输入法对剩余字数计算的影响
背景 前端开发中往往有如下需求限制前端文本框(textfield,input,textarea,div)等的输入字数,可以参考新浪微博.但是这里有个问题,当我们使用中文输入法的时候,我们输入zhesh ...
- 如何快速统计网站所有页面的文本字数
文章目录 前言 一.WinHTTrack Website Copier是什么? 二.WinHTTrack Website Copier使用步骤 三.什么是Python? 四.Python实现的功能 前 ...
- 计算文本相似度_Python文本相似性计算
安装simtext库 pip install simtext 上文本相似性计算代码 from simtext import similaritytextA = '批量爬取网页,需要根据网页之间URL的 ...
- uilabel 自行撑开高度_UILabel文本高度计算的那些事儿
1. 计算文本在一行高度内的宽度 // 段落样式 NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] ...
- 在线文本并集计算工具
在线文本并集计算工具 在线文本并集计算工具 计算2个文本列表的并集,计算2个文本列表的并集,计算2个文本列表的并集 https://tooltt.com/txt-union/
最新文章
- LeetCode - 34. Search for a Range
- 测试驱动开发 测试前移_测试驱动的开发可能看起来是工作的两倍-但无论如何您都应该这样做...
- 一训练就显存爆炸?Facebook 推出 8 比特优化器,两行代码拯救你的显存
- java 同步锁_java线程中的同步锁和互斥锁有什么区别?
- leetcode题解119-杨辉三角II
- centos mysql 同步时间_centos:mysql主从同步配置(2018)
- win7登录密码破解工具
- [Java] 蓝桥杯ALGO-39 算法训练 数组排序去重
- c语言 链接器 原理,新手向的链接器知识普及/////就是这样的说
- 《出版专业实务·初级(2020版)》学习笔记
- 正则方程(机器学习)
- matlab设置图片背景透明_[转载]Matlab中得到透明背景图片的方法
- QT | 设置字体颜色
- c#自定义日历插件,给重要日期添加色彩。以及系统自带的monthCalendar日历插件
- EN 15650: 通风口CE认证
- GeographicLib安装
- HTML简单电子日历的设计与实现
- sklearn梯度提升树(GBDT)调参小结
- 【Bootstrap-学习小结】
- 毕业论文数学公式输入
热门文章
- linux自动同步onedrive,如何在Linux中同步微软OneDrive
- nbu6.5 linux安装,Veritas.Netbackup 6.0 for Linux RedHat AS5.3安装问题
- 古巴比伦理财五大金科定律
- 【polar】协作polar码和非协作polar码的误码率性能matlab仿真
- python 卡方分布值_python数据分析探索变量之间的关系
- 区块链学习笔记:区块链浏览器
- 移动端rem适配ipad, ipad pro
- 将mysql 导出word文档_将数据库的内容生成WORD文档
- python--圆周率的计算
- IntelliJ IDEA的官方汉化插件下载