h5页面在ios手机输入框内emoji表情长度判断

1、需求：
　　要写一个讨论区的h5页面，当然包含了输入框并且输入框限制字符数 30 个，测试发现在ios手机输入emoji表情后输入框内就会超出所限制的字符长度，（说白了就是只要输入表情就会超出原有的30个字符）

　　这里呢我们可以从两个方面去研究，第一：要么直接限制输入表情；第二：想办法计算得出表情的实际字符长度；

记住这里使用.length只对安卓起作用，ios手机会让你入坑，接下来我来教你跳出这个坑。直接上代码不啰嗦了；

自己找个地方去写一个js文件封装以下方法，我这里取名为emoji.js
 
 
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('');
}
 
 
 
在你的页面引用：   import { toArray } from 'components/emoji.js';
 
sendInput 这个方法我是在input里面写的输入事件@input=“sendInput”
 
sendInput(e) {
    if (this.$cnt.isAndroid) {
        this.sendOutLength = e.detail.value.length
        if (e.detail.value.length > 30) {
            this.sendOutData = e.detail.value.slice(0, 30)
        }
    } else {
        this.sendOutLength = toArray(e.detail.value).length
    }
},
 
this.$cnt.isAndroid 这个是我用来判断安卓还是ios：安卓的话就用传统的length就行，ios就用上边封装的方法去实现