大段文本的多個(gè)關(guān)鍵字高亮

fevin 發(fā)布于2019-08-22 10:36 / 1169人閱讀

摘要：前幾天看到有人提在網(wǎng)頁中實(shí)時(shí)高亮關(guān)鍵字，大約萬多個(gè)字中高亮個(gè)關(guān)鍵字，用戶可以隨時(shí)修改并及時(shí)高亮，也就是時(shí)做高亮，說用正則在下效率不理想想了下自已給了一個(gè)實(shí)現(xiàn)方案比如這段文本是這是一大段文本，一大段文本哦關(guān)鍵字是這是大段文本哦首先找出最長的關(guān)

前幾天看到有人提在網(wǎng)頁中實(shí)時(shí)高亮關(guān)鍵字，大約6萬多個(gè)字中高亮600個(gè)關(guān)鍵字，用戶可以隨時(shí)修改并及時(shí)高亮，也就是onkeyup時(shí)做高亮，說用正則在IE下效率不理想

想了下自已給了一個(gè)實(shí)現(xiàn)方案：
比如這段文本是："這是一大段文本，一大段文本哦"
關(guān)鍵字是:["這是","大段文本","哦"]
首先找出最長的關(guān)鍵字，并把這些關(guān)鍵字弄成map,如：

var keys = ["這是", "這里是", "文本", "一"];

var prepareKeys = function() {
    if (!prepareKeys.$map) {
        var map = {};
        var maxLength = 0;
        for (var i = 0; i < keys.length; i++) {
            map[keys[i]] = 1;
            maxLength = Math.max(keys[i].length, maxLength);
        }
        prepareKeys.$map = {
            map: map,
            cache: {},
            length: maxLength
        }
    }
    return prepareKeys.$map;
}

接下來在大段文本中，從開始位置截取按最長關(guān)鍵字的長度截取一段

則截取后的字符串是："這是一大"，那么剩下的字符串為： "段文本，一大段文本哦"

接下來比較 "這是一大" 是否為關(guān)鍵字，如果是關(guān)鍵字，則著色并繼續(xù)按上述規(guī)則截取剩余的字符串

如果"這是一大"不是關(guān)鍵字，則從后面截掉一個(gè)字，并把這個(gè)字追加到剩余的字符串開始位置

則"這是一大"變成"這是一" 剩余字符串為："大段文本，一大段文本哦"

然后再比較"這是一"是否為關(guān)鍵字，直到為空

然后再從剩余的字符串中按上述規(guī)則繼續(xù)截取

最終代碼如下

var input = "這是一大段文本,這是一大段文本";
var keys = ["這是", "這里是", "文本", "一"];

var prepareKeys = function() {
    if (!prepareKeys.$map) {
        var map = {};
        var maxLength = 0;
        for (var i = 0; i < keys.length; i++) {
            map[keys[i]] = 1;
            maxLength = Math.max(keys[i].length, maxLength);
        }
        prepareKeys.$map = {
            map: map,
            cache: {},
            length: maxLength
        }
    }
    return prepareKeys.$map;
}

var colorKeyword = function(str) {
    var info = prepareKeys();
    var output = [];
    while (str) {
        var sub = str.substring(0, info.length);
        var oSub = sub;
        if (info.cache[sub]) {
            console.log("cache:", sub);
            output.push(str.charAt(0));
            str = str.substring(1);
        } else {
            str = str.substring(info.length);
            while (!info.map[sub] && sub) {
                str = sub.charAt(sub.length - 1) + str;
                sub = sub.slice(0, -1);
            }
            if (sub) {
                output.push("<", sub, ">");
            } else {
                info.cache[oSub] = 1;
                output.push(str.charAt(0));
                str = str.substring(1);
            }
        }
    }
    return output.join("");
}
colorKeyword(input);

宣傳下我的區(qū)塊管理框架Magix：https://github.com/thx/magix

歡迎試用Magix、star與fork