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;}

其实这块也可以封装一个方法调用。
时间: 2024-10-18 18:13:53

js emoji表情长度判断的相关文章

js输入文字长度判断

<html><head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie7 .pbt .ftid a { margin-top: 1px; } .cl:after { clear: both; content: "."

js解析emoji表情

Emoji 公司的产品之前只有网页端,并没有提供emoji表情,之后将某个模块整合到app中,里面有个评论功能,在手机端可以输入emoji,显示的时候是空白,说明数据库并没有存储成功,查阅资料后得知emoji是四个字节,而mysql5.5.3前的版本utf8编码最多只支持3个字节. js解析emoji 先需要了解几个概念,js的编码方式.utf16.unicode 1.JavaScript语言采用Unicode字符集,但是只支持一种编码方法ucs-2 2.utf16编码 utf16是ucs-2的

JS~字符串长度判断,超出进行自动截取(支持中文)

今天一个小弟问我的问题,在文本框中输入字符,如果超出指定长度,就把它截取,要求中文等于两个字符的长度,我找一下资料,把这个功能实现了,下面是JS代码: <html> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <body> <input type="text"

移动端不允许提交emoji表情判断

<!DOCTYPE html> <html lang="en"> <head> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <me

iOS emoji表情转码 或者判断

如果项目中有评论或者信息恢复的地方,往往会用到emoji,有时候如后台不支持emoji,就会显示乱码错误,我们可以把emoji转成unicode编码或者utf8编码格式传给服务器.当然如果后台服务器接收的时候能做好判断识别最好,我们这边后台是支持的,我仅记录一下方法,以备不时之需. 先定义一个UITextView 并设置代理 设定一个宏定义,用来判断emoji #define MULITTHREEBYTEUTF16TOUNICODE(x,y) (((((x ^ 0xD800) << 2) |

用JS过滤Emoji表情的输入

本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6773854.html 在前端页面开发过程中,总会碰到不允许输入框输入emoji表情的需求,我的思路是通过编码用正则匹配表情,然后将其替换为空字符创.但是问题也是显而易见的,完整的编码集是什么呢?查阅了官方文档,发现上面并没有给出想要的答案.并且很多emoji表情除了主编码还有副编码(这是我给取的名字),举个例子: \uD83C\uDC00是一个表情,\uD

【Android】android 输入框EditText禁止输入Emoji表情符

转载地址:http://blog.csdn.net/elsdnwn/article/details/45390771 package com.liujy.ui.wiget;import android.content.Context;import android.text.Editable;import android.text.Selection;import android.text.Spannable;import android.text.TextWatcher;import andro

Android--&gt;轻松打造带删除按钮的输入框(EditText),附Emoji表情过滤

输入框带删除按钮, 此乃标配, 实现起来方法也很多, 网上开源也很多. 但是, 没事就喜欢瞎折腾. 上图说话. 只是在原生的基础上加了扩展. 相对来说入侵非常少, 使用方法和原生的一模一样.无任何阉割. 完整代码: public class ExEditText extends AppCompatEditText { Rect clearRect = new Rect(); public ExEditText(Context context) { super(context); } public

微信去除EMOJI表情

方法是: 方法是:return json_decode(preg_replace("#(\\\ue[0-9a-f]{3}|\\\ud83e|\\\udd14)#ie", "", json_encode($text))); 原理是: 进行微信公众号开发者接入的时候,与用户的对话互动中,涉及到的文本信息不仅仅是文字那么简单,其中可能还会包含着各种表情字符,例如「emoji表情」. 百科: Emoji 由于微信接口中对于emoji表情使用的是UTF-8的二进制字符串,并没