JS-多組關鍵詞列表高亮

来源:https://www.cnblogs.com/Raincry/archive/2020/06/26/13196210.html

/** * 多個關鍵詞列表高亮(word_list1,color1,word_list2,color2,...) * @param word_list 關鍵詞列表(例: ["關鍵詞a","關鍵詞b"],不區分大小寫) * @param color 顏色值(例: "#ff0000") * @retur ...


/**
 * 多個關鍵詞列表高亮(word_list1,color1,word_list2,color2,...)
 * @param word_list 關鍵詞列表(例: ["關鍵詞a","關鍵詞b"],不區分大小寫)
 * @param color     顏色值(例: "#ff0000")
 * @returns {{render: Function}}
 * 優先順序:word_list1>word_list2>word_list3...
 * @example
 * var highlight = new wordHighlight(["B","C"],"#ff0000",["ABC","DEF"],"blue");
 * console.log(highlight.render("ABC")); // <b style="color:blue">A</b><b style="color:#ff0000">BC</b>
 * console.log(highlight.render("Bc,DEF")); // <b style="color:#ff0000">Bc</b>,<b style="color:blue">DEF</b>
 */
function wordHighlight(word_list,color)
{
    if (!(this instanceof wordHighlight)) {
        throw 'should be called with the new!';
    }
    var that = this;

    that.root        = null;
    that.color_list  = [];
    that.color_range = null;

    var createNode = function(value){
        var node   = {};
        node.value = value || "";
        node.next  = {};
        node.fail  = null;
        node.len   = 0; // word長度,0表示非末尾,非0表示word的長度
        node.color = -1;
        return node;
    }

    var addWord = function(word,color){
        word = word.trim().toLowerCase();
        if (!word) {
            return;
        }
        var cur = that.root;
        var len = word.length;
        for (var i = 0,v; i < len; i++) {
            v = word[i];
            if (cur.next[v] === undefined) {
                node = createNode(v);
                cur.next[v] = node;
            }
            cur = cur.next[v];
        }
        cur.len = len;
        if (cur.color == -1) {
            cur.color = color;
        }
    }

    var buildFailIndex = function(){
        var queue = [];
        var key;
        for (key in that.root.next) {
            that.root.next[key].fail = that.root;
            queue.push(that.root.next[key]);
        }
        while (queue.length) {
            node = queue.shift();
            for (key in node.next) {
                var child_node = node.next[key];
                var val = child_node.value;
                var p = node.fail;
                while (p != null) {
                    if (p.next[val] !== undefined) {
                        child_node.fail = p.next[val];
                        break;
                    }
                    p = p.fail;
                }
                if (p === null) {
                    child_node.fail = that.root;
                }
                queue.push(child_node);
            };
        }
    }

    var mergeRange = function(color,range_list){
        if (!range_list || !range_list.length) {
            return;
        }
        range_list = (function(input_list){
            // 區間合併
            var output_list = [];
            var tmp = {}, left = -1, right = -1;
            input_list.forEach(function(range){
                var start = range[0], end = range[1];
                if (tmp[start] === undefined || tmp[start] < end) {
                    tmp[start] = end;
                }
            });
            for (var start in tmp) {
                var end = tmp[start];
                if (left == -1) {
                    left = 0 | start;
                    right = end;
                }
                if (start > right) {
                    output_list.push([left,right])
                    left = 0 | start;
                    right = end;
                } else if (end > right) {
                    right = end;
                }
            }
            if (left != -1) {
                output_list.push([left, right])
            }
            return output_list;
        })(range_list);
        if (that.color_range === null) {
            that.color_range = {};
            range_list.forEach(function(v){
                that.color_range[v[0]] = [v[1],color];
            });
        } else {
            var xy_list = [0],x,y;
            for (var x in that.color_range) {
                xy_list.push(0|x);
                xy_list.push(that.color_range[x][0]);
            }
            xy_list.push(Infinity);
            //console.log(xy_list);
            var i = 0,len = range_list.length;
            do {
                x = xy_list.shift();
                y = xy_list.shift();
            } while (x == y);
            var _x,_y;
            while (i < len) {
                _x = range_list[i][0];
                _y = range_list[i][1];
                if (y < _y) {
                    if (_x < y) {
                        that.color_range[_x < x ? x : _x] = [y,color];
                    }
                    do {
                        x = xy_list.shift();
                        y = xy_list.shift();
                    } while (x == y);
                    continue;
                }
                if (_y > x) {
                    that.color_range[_x < x ? x : _x] = [_y,color];
                }
                i++;
            }
        }
    }

    that.root = createNode();

    var args = Array.prototype.slice.call(arguments);
    while (args.length) {
        var color = that.color_list.length;
        word_list = args.shift();
        if (!word_list.length) {
            args.shift();
            continue;
        }
        that.color_list.push(args.shift());
        for (var i in word_list) {
            addWord(word_list[i],color);
        }
    }
    buildFailIndex();
    //console.log(that.root);
    return {
        render: function(content){
            if (!that.color_list.length) {
                return content;
            }
            var range_list = [];
            var p = that.root;
            var len = content.length;
            var _content = content.toLowerCase();
            for (var i = 0,val,temp; i < len; i++) {
                val = _content[i];
                while (p.next[val] === undefined && p != that.root) {
                    p = p.fail;
                }
                p = p.next[val] ? p.next[val] : that.root;
                temp = p;
                while (temp != that.root) {
                    if (temp.len) {
                        if (!range_list[temp.color]) {
                            range_list[temp.color] = [];
                        }
                        range_list[temp.color].push([i + 1 - temp.len, i + 1]);
                    }
                    temp = temp.fail;
                }
            }
            for (var color in range_list) {
                //console.log(range_list[color]);
                mergeRange(color,range_list[color]);
            }
            if (that.color_range === null) {
                return content;
            }
            var new_content = '',x = 0,y;
            for (y in that.color_range) {
                new_content += content.substring(x,y);
                x = that.color_range[y][0];
                new_content += '<b style="color:' + that.color_list[that.color_range[y][1]] + '">' + content.substring(y,x) + '</b>';
            }
            new_content += content.substring(x);
            that.color_range = null;
            return new_content;
        }
    }
}

您的分享是我們最大的動力!

更多相關文章
  • 我們知道數據的存儲和檢索是兩個很重要的功能,當我們的數據量大了,怎麼能快速的檢索數據呢,答案是使用索引,可索引具體的技術實現有很多,選擇哪一種呢,我就以mysql為例記錄下它為什麼選擇了B+樹作為索引的實現方式。 1. 索引簡介 索引是一種用於快速查詢行的數據結構,就像一本書的目錄就是一個索引,如果 ...
  • 前言 本文將帶大家學習使用前端開發神器-charles,從基本的下載安裝到常見配置使用,為大家一一講解。 一、花式誇獎Charles 截取 Http 和 Https 網路封包。 支持重髮網絡請求,方便後端調試。 支持修改網路請求參數。 支持網路請求的截獲並動態修改。 支持模擬慢速網路。 好,騎上我心 ...
  • 一、堆和棧,數據的存儲方式 1.註意點: JS中是沒有堆和棧的概念,我們用堆和棧來講解,目的就是方柏霓講解,存儲方式是一致的。 2.存儲方式: 基礎數據類型進行值傳遞,複雜數據類型進行地址傳遞 <script> //1.基本數據類型 var str1 = "xiaoliao"; var str2 = ...
  • Web 創建設計 設計一個網站,需要認真思考和規劃。 最重要的是要知道你的訪問用戶。 用戶是瀏覽者 一個典型的訪問者將無法讀取您的網頁的全部內容! 無論您在網頁中發佈了多麼有用的信息,一個訪問者在決定是否繼續閱讀之前僅僅會花幾秒鐘的時間進行瀏覽。 請確保使你的觀點,在頁面的第一句!另外,您還需要在整 ...
  • powertools可以稱得上插件界的瑞士軍刀。 相對於VS Code中大多數插件的出現為瞭解決某一項弊端和不足,powertools則聚合了很多強大且實用的功能,能夠增強VS Code的功能,並提升VS Code的使用體驗。 powertools就如同之前使用iOS系統時使用過的一款軟體Workf ...
  • CommonJS 和 ES6 Module 究竟有什麼區別? 作為前端開發者,你是否也曾有過疑惑,為什麼可以代碼中可以直接使用 require 方法載入模塊,為什麼載入第三方包的時候 Node 會知道選擇哪個文件作為入口,以及常被問到的,為什麼 ES6 Module export 基礎數據類型的時候 ...
  • 在 Node.js 項目開發過程中,隨著項目的發展,調用關係越來越複雜,調試工具的重要性日益凸顯。 Node(v6.3+)集成了方便好用 V8 Inspect 調試器,允許我們通過 Chrome DevTools 進行圖形化的調試和性能分析。同時,我們也可以使用 VS Code,Webstorm 等 ...
  • 歡迎使用慕課網 - Markdown 編輯器 Markdown 編輯器使用一套簡單實用的標記語言來實現簡單的文本排版,可以讓你專註於鍵盤碼字而非排版,化繁為簡,回歸寫作本質,帶來前所未有的書寫體驗! 我們在工具欄提供了豐富的快捷鍵,可以使用它們標記不同的標題,將一些文字標記為粗體或者斜體,也可以創建 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...