js html显示emoji表情,js emoji表情长度判断-程序员宅基地

技术标签： js html显示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;

}

其实这块也可以封装一个方法调用。

原文：http://www.cnblogs.com/wzybnzy/p/7569113.html

本文链接：https://blog.csdn.net/weixin_35917998/article/details/118040910

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

使用UmcFramework和unimrcpclient.xml连接多个SIP设置的配置指南及C代码示例

在多媒体通信领域，MRCP（Media Resource Control Protocol）协议被广泛用于控制语音识别和合成等媒体资源。UniMRCP是一个开源的MRCP实现，提供了客户端和服务端的库。UmcFramework是一个基于UniMRCP客户端库的示例应用程序框架，它帮助开发者快速集成和测试MRCP客户端功能。本文将详细介绍如何使用UmcFramework和unimrcpclient.xml配置文件连接到多个SIP设置，以及如何用C代码进行示例说明。

java.net.ProtocolException: Server redirected too many times (20)-程序员宅基地

文章浏览阅读3k次。报错：java.net.ProtocolException: Server redirected too many times (20)1.没有检查到cookie，一直循环重定向。解决：CookieHandler.setDefault(new CookieManager(null, CookiePolicy.ACCEPT_ALL));URL url = new URL(url); ..._java.net.protocolexception: server redirected too many times (20)

springboot启动报错 Failed to scan *****/derbyLocale_ja_JP.jar from classloader hierarchy_failed to scan from classloader hierarchy-程序员宅基地

文章浏览阅读4.1k次。问题这是部分报错信息2019-07-11 14:03:34.283 WARN [restartedMain][DirectJDKLog.java:175] - Failed to scan [file:/D:/repo/org/apache/derby/derby/10.14.2.0/derbyLocale_ja_JP.jar] from classloader hierarchyjava...._failed to scan from classloader hierarchy

MATLAB-ones函数_matlab中ones函数-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏7次。在MATLAB中，ones函数用于创建一个指定大小的由1组成的矩阵或数组。_matlab中ones函数

解决PS等软件出现应用程序无法正常启动(0xc000007b)_photoshop应用程序无法正常启动0xc000007b。请单击“确认”关闭应用程序。-程序员宅基地

文章浏览阅读3.9w次，点赞2次，收藏9次。　　在使用电脑办公过程中，安装应用程序时难免遇到无法安装或者无法正常启动的问题，这对我们使用电脑带来了诸多不便。那遇到应用程序无法正常启动的问题要如何解决呢?相信大家肯定都是十分疑问的，每次都是只能忍痛重新安装软件。今天，小编就和大家探讨下应用程序无法正常启动的解决方法，帮助大家排忧解难。0xc000007b电脑图解1　　第一种方案：SFC检查系统完整性来尝试修复丢失文件　　1、打开电脑搜索输入cmd.exe，选择以管理员身份运行，跳出提示框时选择继续。0xc000007b电脑图解2_photoshop应用程序无法正常启动0xc000007b。请单击“确认”关闭应用程序。

oracle介质恢复和实例恢复的异同-程序员宅基地

文章浏览阅读396次。1、概念 REDO LOG是Oracle为确保已经提交的事务不会丢失而建立的一个机制。实际上REDO LOG的存在是为两种场景准备的：实例恢复（INSTANCE RECOVERY）；介质恢复（MEDIA RECOVERY）。实例恢复的目的是在数据库发生故障时，确保BUFFER CACHE中的数据不会丢失，不会造成数据库的..._oracle 实例恢复和介质恢复