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