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

Little_XM 發(fā)布于2019-08-01 15:33 / 507人閱讀

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

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

想了下自已給了一個實(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)鍵字，則從后面截掉一個字，并把這個字追加到剩余的字符串開始位置

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

然后再比較"這是一"是否為關(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

云服務(wù)器 GPU云服務(wù)器關(guān)鍵詞高亮 vim文本高亮文本分析_關(guān)鍵句抽取大段

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49973.html

發(fā)表評論

登陸后可評論

0條評論

Little_XM

男|高級講師

我要關(guān)注我要私信

TA的文章

gatling學(xué)習(xí)筆記（一）——概念理解

閱讀 1648·2021-10-12 10:11
修羅云：成立兩周年特惠，有深港IPCL、香港HKT、廣州、中山、徐州、杭州、佛山等，最低6折起

閱讀 3764·2021-09-03 10:35
表單密碼自動填充hack

閱讀 1446·2019-08-30 15:55
小程序自定義switch組件

閱讀 2137·2019-08-30 15:54
H5項(xiàng)目常見問題及注意事項(xiàng)

閱讀 1004·2019-08-30 13:07
vw+rem移動端自適應(yīng)布局

閱讀 1018·2019-08-30 11:09
翻譯 | 深入理解CSS時序函數(shù)

閱讀 584·2019-08-29 13:21
自制jq分頁插件

閱讀 2655·2019-08-29 11:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章