texthighlighter下載 - texthighlighter原始碼下載

texthighlighter

其他源碼

1.0.0

下載

文字螢光筆

Vanilla JS 類別可突顯文字區域中的搜尋結果，同時保持該區域的功能。

由於無法設定文字區域中文字的樣式（因為它不是 HTML），因此此類可以幫助您突出顯示文字區域中的任何文字。例如在搜尋結果中。

螢幕截圖

查看演示{:target="_blank"}

特徵

沒有依賴性。
沒有配置。只需實例化該類別並呼叫方法即可。
可根據需要在任意多個文字區域中使用，只需為每個文字區域進行實例化即可。
有反應。標記將根據螢幕大小、文字區域大小和滾動進行調整。
保留文字區域的原始背景。
可以適當銷毀。將刪除所有事件和結構。
可以選擇區分大小寫和不區分大小寫的搜尋。
可以自由搜尋或僅單字搜尋。
提供找到的結果數量的計數。
可以導航搜尋結果，根據需要查看它們。

它的使用非常簡單，實例化您需要的文字區域的類，並調用搜尋方法來突出顯示您在第一個參數中傳遞的文字。第二個參數是可選的，並採用一個布林值，如果為 true 將使搜尋區分大小寫。預設不區分大小寫。最後一個參數也採用一個布林值，如果為 true，將執行單字搜尋。否則，這是一個免費搜索，可以匹配單字的任何部分。

用法和程式碼範例

將以下文件新增至您的專案：

文字螢光筆.js
文字螢光筆.css

 let tarea = document . getElementById ( 'txt' ) ;
let hilite = new textHighlight ( tarea ) ;

let searchResult = 'Some Expression' ;
let sens = true ;                        // Case sensitive. Optional, default: false
let word = true ;                        // Perform a words only search. Optional, default: false
hilite . search ( searchResult , sens , word ) ;

若要存取找到的出現次數，請使用：

 let count = hilite . count ( ) ;

您可以使用 prev 和 next 方法在反白的結果之間來回導航。此導航是循環的，這意味著當到達末尾時，下一個呼叫會將您帶回開頭，反之亦然。下面的例子：

 let btnPrev = document . getElementById ( 'prev' ) ;
let btnNext = document . getElementById ( 'next' ) ;

btnPrev . addEventListener ( 'click' , hilite . prev ) ;
btnNext . addEventListener ( 'click' , hilite . next ) ;