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 emoji表情长度判断

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