js 中文長字符截短&關鍵字符隱藏 自定義過濾器

兩個非常簡單的過濾器：隱藏關鍵字符和字符截短。同樣也可以遷移到ng和原生js直接使用（去掉avalon.filters聲明即可）。后期還有不錯的過濾器，還往這里面加

keyword:avalon,js,自定義,過濾器,中文,長字符,截短,截斷,truncate,隱藏字符，angular

隱藏關鍵字符

可能需要在前端某些頁面上隱藏一些關鍵信息（如果真正要隱藏，還是需要后端來處理），那么可以用到：

/**
 * 隱藏字符串中關鍵code ,隱藏字符默認為'*'
 * 例如隱藏手機號，卡號：1890000000 - 189****0000; {{str|hide_code(3,4,'*')}}
 * @param str
 * @param pos 開始位置
 * @param length 替換字符個數
 * @param newChar 替換的字符/字符串
 * @returns {*}
 */
avalon.filters.hide_code = function (str, pos, length, newChar) {
    pos = pos || 0;
    length = length || 0;
    newChar = newChar || '*';
    if (pos < 0 || length <= 0 || pos + length > str.length) {
        return str;
    }
    var repStr = "";
    for (var i = 0; i < length; i++) {
        repStr += newChar;
    }
    return str.slice(0, pos) + repStr + str.slice(pos + length, str.length);
}

原生js寫法(改avalon.filters 為 var，下面的過濾器也一樣)

var hide_code = function (str, pos, length, newChar) {
    pos = pos || 0;
    length = length || 0;
    newChar = newChar || '*';
    if (pos < 0 || length <= 0 || pos + length > str.length) {
        return str;
    }
    var repStr = "";
    for (var i = 0; i < length; i++) {
        repStr += newChar;
    }
    return str.slice(0, pos) + repStr + str.slice(pos + length, str.length);
}

長字符截短（按字符截取，中文占兩字符-改進版）

原avalon的truncate過濾器，是按照中文英文均占一個字符來截取。該過濾器改進為中文占兩個字符英文一個字符來進行截取

/**
 * 對長字符串截短，以字符長度截取，中文占兩字符;{{str|truncatex(4,'...')}}
 * @param str
 * @param length,新字符串長度（按照英文字符算，一個中文占兩字符），包含truncation的字符個數
 * @param truncation,新字符串的結尾的字段
 * @returns {返回新字符串}
 */
avalon.filters.truncatex = function (str, length, truncation) {
    var chinese_pattern = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
    // [\u4E00-\u9FA5]表示漢字，[\uFE30-\uFFA0]表示全角
    str = str || " ";
    length = length || 30;
    truncation = typeof truncation === "string" ? truncation : "...";
    var chineseIn = function (s) {
        return chinese_pattern.exec(s) ? true : false;
    };
    var calcSize = function(source){
        var strTemp = source.replace(chinese_pattern, "aa");
        return strTemp.length;
    };
    var recursion = function (source, length) {
        if (calcSize(source) <= length || (!chineseIn(source))) {
            return source;
        } else {
            return recursion(source.slice(0, source.length - 1), length);
        }
    };
    var sliceLength = length - truncation.length;
    return calcSize(str) > length ? recursion(str.slice(0, sliceLength), sliceLength) + truncation : String(str);
}

題外話：
最近接手一個項目，前端采用avalon這個mvvm框架，對於先前接觸過angularjs的人來說，總感覺avalon還是“太”輕量了

網上為avalon背書的無外乎是說：國產，體積小，逃離dom操作，上手難度低，兼容ie6；劣勢是：“然而avalon也有自己的劣勢——知名度較低”，呃，我想靜靜.....

• 吐槽jquery過渡依賴選擇器，繁雜的dom操作，可是avalon的ajax和動畫效果還得指望其他控件，實際上往往卻又是和jquery搭配使用，吐槽jquery，卻又離不開jquery，真是悲劇...
• 說angular非常難上手，ng上手難度低好不，ng生態好，功能強大，文檔和翻譯齊全，社區成熟活躍，官方插件第三方插件一大堆。
• 性能問題，為了平衡開發效率和性能，這只是一種選擇問題。用過ng的人，也不會擔心什么性能問題
• 吐槽angular版本兼容性。可Avalon還是出現這樣的聲明：“注意 : 以上三個分支都比較穩定, 但互相不太兼容。 建議直接用2.0。”

以上只是吐槽那些文案背書，avalon也算一個不錯的框架，也一直在優化改進和吸收那些知名MVVM框架的優點，比如2.0版本，就新增了4個數組的過濾器，指令也進入了to do list。

希望哪天用過angular的人再來用avalon后都會說：哎喲，不錯哦！