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

其實這塊也可以封裝一個方法調用。