突出显示所选文本并同时获取实例

Highlighting selected text and getting the occurrence at the same time

本文关键字:获取 实例 文本 显示      更新时间:2023-09-26

我是JavaScript的新手,正在尝试编写一个简单的荧光笔工具。每个函数单独工作正常,但是在组合时,出现次数不再正常工作。这是我的代码,http://jsfiddle.net/mrBXu/,问题是当您第一次选择任何"The"时,出现效果很好,但是如果您选择它,它就不再正确了。提前感谢您的帮助!

不幸的是,您要做的事情并不容易。它在第二次尝试中不起作用的原因是因为您插入了一个范围来突出显示。第一次选择文本时,startContainer 是一个位于"p"标签内的 textNode。第二次选择时,startContainer 是一个 textNode,它从您插入的跨度末尾开始。您需要执行的操作将需要更多的代码。你不仅需要检查 startContainer,还需要找到它与 "p" 标签的关系,并检查 "p" 标签内 startContainer 之前的所有节点。

下面是一个工作示例:http://jsfiddle.net/mrBXu/4/