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

fevin 发布于2019-08-22 10:36 / 1144人阅读

摘要：前几天看到有人提在网页中实时高亮关键字，大约万多个字中高亮个关键字，用户可以随时修改并及时高亮，也就是时做高亮，说用正则在下效率不理想想了下自已给了一个实现方案比如这段文本是这是一大段文本，一大段文本哦关键字是这是大段文本哦首先找出最长的关

前几天看到有人提在网页中实时高亮关键字，大约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文本高亮文本分析_关键句抽取大段

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90909.html

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

摘要：前几天看到有人提在网页中实时高亮关键字，大约万多个字中高亮个关键字，用户可以随时修改并及时高亮，也就是时做高亮，说用正则在下效率不理想想了下自已给了一个实现方案比如这段文本是这是一大段文本，一大段文本哦关键字是这是大段文本哦首先找出最长的关前几天看到有人提在网页中实时高亮关键字，大约6万多个字中高亮600个关键字，用户可以随时修改并及时高亮，也就是onkeyup时做高亮，说用正则在I...

Little_XM 2019-08-01 15:33 评论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