js html显示emoji表情,js emoji表情长度判断(示例代码)
1、需求:输入框长度限制为10个字符,包括表情。超出长度提示。
注:iPhone手机自定义的表情,有四个小人的,三个小人的,主要是长度还都不一样。有的表情可能一个就超出了长度限制(10),比如???????????这个表情长度为11,当然我这个长度设置的比较小,可以随意设置。
查阅资料的过程中发现了lodash可以处理数组,并且可以处理表情。
console.log(_.toArray(‘12??‘).length); // --> 3);
这样的话就能符合我截取的条件了。判断如果数组的某一个长度超出我的限制长度,就截取数组。
本来这样就可以了,但是就为了转这个引入一个文件,也不合适。于是我就把源码里面的一些符合我的需要的内容摘出来。
let rsAstralRange = ‘\\ud800-\\udfff‘,
rsZWJ = ‘\\u200d‘,
rsVarRange = ‘\\ufe0e\\ufe0f‘,
rsComboMarksRange = ‘\\u0300-\\u036f‘,
reComboHalfMarksRange = ‘\\ufe20-\\ufe2f‘,
rsComboSymbolsRange = ‘\\u20d0-\\u20ff‘,
rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange;
let reHasUnicode = RegExp(‘[‘ + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ‘]‘);
let rsFitz = ‘\\ud83c[\\udffb-\\udfff]‘,
rsOptVar = ‘[‘ + rsVarRange + ‘]?‘,
rsCombo = ‘[‘ + rsComboRange + ‘]‘,
rsModifier = ‘(?:‘ + rsCombo + ‘|‘ + rsFitz + ‘)‘,
reOptMod = rsModifier + ‘?‘,
rsAstral = ‘[‘ + rsAstralRange + ‘]‘,
rsNonAstral = ‘[^‘ + rsAstralRange + ‘]‘,
rsRegional = ‘(?:\\ud83c[\\udde6-\\uddff]){2}‘,
rsSurrPair = ‘[\\ud800-\\udbff][\\udc00-\\udfff]‘,
rsOptJoin = ‘(?:‘ + rsZWJ + ‘(?:‘ + [rsNonAstral, rsRegional, rsSurrPair].join(‘|‘) + ‘)‘ + rsOptVar + reOptMod + ‘)*‘,
rsSeq = rsOptVar + reOptMod + rsOptJoin,
rsSymbol = ‘(?:‘ + [rsNonAstral + rsCombo + ‘?‘, rsCombo, rsRegional, rsSurrPair, rsAstral].join(‘|‘) + ‘)‘;
let reUnicode = RegExp(rsFitz + ‘(?=‘ + rsFitz + ‘)|‘ + rsSymbol + rsSeq, ‘g‘);
export function toArray (val) { // 字符串转成数组
return hasUnicode(val)
? unicodeToArray(val)
: asciiToArray(val);
}
export function hasUnicode (val) {
return reHasUnicode.test(val);
}
export function unicodeToArray (val) {
return val.match(reUnicode) || [];
}
export function asciiToArray (val) {
return val.split(‘‘);
}
是的,一大堆正则。看着就头疼。这个方法可以满足,把表情转成数组中的一份子。这样的话,我们只用判断数组就好了。
然后根据得到的数组,去挨个判断每一个的长度;代码如下:
let strarr = utils.toArray(val);
let str = ‘‘, strlen = 0, num = 0, lastarr = [];
for (let i = 0;i < strarr.length;i++) {
strlen += strarr[i].length; // 数组中每一个字符的长度相加
if (strlen > this.limit) { // 如果长度大于限制
num = i; // 记录下到第几个开始超出限制
lastarr = strarr.slice(0, this.limit); // 取出限制内的数组
this.$toast(‘长度超出了‘);
break; // 退出循环
// return;
}
}
if (strlen > this.limit) { // 如果输入的第一个数长度大于限制的表情
for (var j = 0;j < num;j++) {
str += lastarr[j]; // 取出限制内的数组的字符
}
this.currentValue = str;
}
其实这块也可以封装一个方法调用。
js html显示emoji表情,js emoji表情长度判断(示例代码)相关推荐
- java byte 图片浏览器直接显示_以Spring Boot的方式显示图片或下载文件到浏览器的示例代码...
以Java web的方式显示图片到浏览器以Java web的方式下载服务器文件到浏览器 以Spring Boot的方式显示图片或下载文件到浏览器 请求例子:http://localhost:8080/ ...
- html遍历json数组,JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
本文实例讲述了JS遍历JSON数组及获取JSON数组长度操作.分享给大家供大家参考,具体如下: 遍历 JSON 数组: var questions = data.data.questionnaire. ...
- 088:vue+openlayers实时显示单个卫星的位置及轨迹 (示例代码)
第088个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers项目中计算并显示卫星的轨迹. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果: 注 ...
- d3.js html显示图片,d3.js v4:如何在鼠标点击节点后显示图像
在使用d3.js时仍然相当缺乏经验,我碰到了一个障碍. 希望有人能帮助我.d3.js v4:如何在鼠标点击节点后显示图像 我试图在鼠标单击图形中的节点时显示图片. 理想情况下,我想单击几个节点并显示图 ...
- html js中间显示悬浮窗,Js 悬浮窗口(可固定位置)代码
本节内容: Js 悬浮窗口 说明: 固定位置的Js悬浮窗口,代码有详细的注释. 例子: 复制代码 代码示例: Fixed固定位置的悬浮 - www.jquerycn.cn * { font-size: ...
- js 实时显示服务器时间,js获取服务器实时时间
本文主要和大家分享js获取服务器实时时间,主要以代码的方法和大家分享,希望能帮助到大家. AJAX获取服务器时间 /* * ajax 函数,处理 ajax 请求 * @param function c ...
- html用js计算显示,html+css+js实现计算器功能
/* 主体 */ .counter{ width: 396px; height: 486px; background-color: #F2F2F2; border: 1px solid #C2C3C6 ...
- js中如何把字符串转化为对象、数组示例代码
很明显是一个对象,但如何把文本转为对象呢.使用eval();注意一定要加括号,否则会转换失败 把文本转化为对象 var test='{ colkey: "col", colsin ...
- html光标定位到文本框,js获取光标位置和设置文本框光标位置示例代码
function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurP ...
最新文章
- 10分钟内基于gpu的目标检测
- 以MATLAB的方式实现微积分问题的计算机求解问题及解决方案集锦(二)
- redhat enterprise 5 在 VMware 6.5 中中文显示乱码的解决办法
- 使用系统规则测试System.in和System.out
- 容斥原理 和 欧拉函数
- ​腾讯第一季度员工平均月薪 7.6 万元;“淘宝特价版”App 正式更名为“淘特”;Deno 1.10 正式发布|极客头条...
- Stacking 模型融合详解(附python代码)
- hdoj2955 Robberies(01背包)
- 如何开启MacBook屏幕键盘面板显示间隙操作工具栏?
- GOOD AI Example GREAT AI Company
- TextWatcher使用
- 有机食品农产品电商网站HTML模板
- php微信小商城系统设计,基于微信小程序的互联网商城系统设计开题报告
- 房屋建筑资质(三级建筑资质费用)
- ANDROID 开源库
- cesium去除控件及版权信息
- Java开源 ERP与客户管理-Sequoia ERP
- 最适合企业的手机操作系统
- 1、【WebGIS实战】系列介绍
- 使用npm命令启动http-server服务时指定端口
热门文章
- 图像拼接(一)——SIFT算法新手入门级介绍!!!
- 论文解读PCT: Point Cloud Transformer(用于点云处理的Transformer)
- 2021年全球无线宽带收入大约5631.4百万美元,预计2028年达到11770百万美元,2022至2028期间,年复合增长率CAGR为12.0%
- mingw报未定义引用gdi32中函数,undefined reference to `__imp_CreateCompatibleDC‘错误解决办法
- Transformer笔记
- Windows命令行修改文件属性
- 【学习笔记】设计模式-原型模式/克隆模式(Prototype)
- 英语六级638分经验总结
- js获取policy上传到阿里云
- 小白菜 docker 基础命令整理