大段文本的多個關鍵字高亮

Little_XM 發布于2019-08-01 15:33 / 499人閱讀

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

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

想了下自已給了一個實現方案：
比如這段文本是："這是一大段文本，一大段文本哦"
關鍵字是:["這是","大段文本","哦"]
首先找出最長的關鍵字，并把這些關鍵字弄成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;
}

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

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

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

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

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

然后再比較"這是一"是否為關鍵字，直到為空

然后再從剩余的字符串中按上述規則繼續截取

最終代碼如下

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

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

歡迎試用Magix、star與fork

GPU云服務器云服務器關鍵詞高亮 vim文本高亮文本分析_關鍵句抽取大段

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49973.html

大段文本的多個關鍵字高亮

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

fevin 2019-08-22 10:36 評論0 收藏0
MacVIM

摘要：當光標從一點移動到另外一點，在這兩點之間的文本包括這兩個點稱作被跨過，這里的命令也被稱作是。移動光標到當前行的第一個字母位置。剪貼板在里面被稱為寄存器。將會拷貝從當前光標到第三個出現的引號之間的內容到剪貼板。 https://github.com/b4winckler/macvim/releases Type :h macvim For usage instructions, Typ...

13651657101 2019-06-28 10:07 評論0 收藏0
網頁中文本朗讀功能開發實現分享

摘要：網頁中文本朗讀功能開發實現分享文本首發我的博客前幾天完成了一個需求，在網頁中完成鼠標指向哪里，就用語音讀出所指的文本。獲取完整朗讀文本要處理的朗讀文本這樣就可以獲取到一個標簽的功能提醒和內容的全部帶朗讀文本了。網頁中文本朗讀功能開發實現分享文本首發我的博客 - https://blog.cdswyda.com/post/2017120914 前幾天完成了一個需求，在網頁中完成鼠標指...

tianyu 2019-08-22 13:40 評論0 收藏0