texthighlighter

文本荧光笔

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 ) ;

如果您需要清除突出显示，请调用clear方法。

 hilite . clear ( ) ;

当它超出范围时，只需调用 destroy 方法，一切都会像实例化之前一样。

 hilite . destroy ( ) ; 

关于

这个类的灵感来自于lonekorean 的highlight-within-textarea JQuery 插件。基本上，我的项目需要类似的功能，但不想仅仅为此而包含 JQuery，并且没有找到任何其他足够好的此类代码。

这里的主要目的是在文本区域中突出显示搜索结果。

该类在 Chrome 117 和 Firefox 118 中进行了测试。

执照

该项目已获得 MIT 许可