為元素文字高亮關鍵字

2021-06-22 20:12:09 字數 1499 閱讀 8445

已知乙個元素: 123abc&de

,我們想高亮文字"a",也就是說,把元素內容變為

123abc&de

。要如何做?

這還不簡單,把div的innerhtml做個replace,把 a替換成 a 不就成了?注意,字元實體&裡面也有個a,replace會破壞它的,如果用正則控制不替換&和;之間的字元似乎又比較麻煩。我這裡有個方法:

1. 把 div 的 innertext 用關鍵字拆分開,得到["123", "bc&de"]

2. 把這個陣列中的字串轉換成html格式,即得到["123", "bc&de"]

3. 用a 這個字串join上面那個陣列,即得到 123a

bc&de

這樣我們就得到了div高亮後的innertext。

不過別高興太早,需求總是會變化的:如果要高亮3a和abc這兩個關鍵字怎麼辦?上面那種做法完全沒用了。今天想到乙個比較笨的辦法,構造乙個陣列markarray,陣列長度和div的innertext的長度一樣,記錄innertext中的每乙個字是否被高亮,這個用indexof可以做到。然後把單個的字進行合併,得到若干被高亮和不被高亮的字串,最後把這些字串陣列進行拼接。仍以上述為例:

1. 3a和abc高亮,markarray為[0, 0, 1, 1, 1, 1, 0, 0, 0]

2. 合併後,得到3個字串,12不高亮,3abc高亮,&de不高亮

3. 這3個字串轉換為html格式,高亮的串用包裹,最後得到12

3abc&de

**

var highlightutil = ,

_getmatchpos: function(matchstr) else

}return posarray;

},_mark: function()

for (var i = 0; i < this._keys.length; i++) }}

},_combine: function()

this._blocks = ;

var start = 0;

var len = 0;

var lastmark = this._matchmarkarray[0];

for (var i = 0; i < this._matchmarkarray.length; i++) else

}var lastblock = [start, len, lastmark];

this._blocks.push(lastblock);

},_processblocks: function() else

}return htmlstr;

},_texttohtml: function(text)

};

使用 highlightutil.highlight(div, ["3a", "abc"]) 高亮字串。這個演算法比較低效,可以看到_mark方法用了三層迴圈,文字內容較短的元素還行,而且元素裡不能再巢狀元素。以後再嘗試改進演算法。

vue搜尋關鍵字使文字高亮

思路 通過正則regexp進行全域性匹配,將符合條件的元素通過replace替換成為html 片段 封裝成自定義指令在main.js裡引入增加可復用性 import vue from vue function hightlight el,binding else el.innerhtml str v...

lucene 關鍵字高亮

indexwriter writer new indexwriter indexpath,analyzer,true document doca new document string filetexta 因為火燒雲總是燃燒著消失在太陽衝下地平線的時刻,然後便是寧靜的自然的天籟,沒有誰會在這樣的時光...

關鍵字高亮變色

在搜尋介面需要關鍵字與搜尋出來的文字高亮顯示並且不區分字母大小寫 關鍵字高亮變色 param color 變化的色值 param text 文字 param keyword 文字中的關鍵字 return 結果spannablestring public static spannablestring ...