大段文本的多个关键字高亮

Posted 2020-11-28 jlfw

前几天看到有人提在网页中实时高亮关键字，大约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