Javascript 如何获取所选文本的索引

我没有找到任何符合所有标准的插件： 我想要一个荧光灯。我希望能够突出显示文本，按照选择的顺序存储文本，如果他们只选择一个单词的一部分，我希望自动选择所有单词

这就是我到目前为止所做的：

JS:

HTML:

<div id="highlightable">
    <p id="p1">stibulum nisl orci, viverra in sollicitudin sed, iaculis vel erat. Nam lacus quam, volutpat et porta non, consequat ac tortor. Fusce non lorem vitae</p>
    <p>libero imperdiet convallis. Morbi vestibulum viverra ligula, porttitor dapibus justo dictum ut. Pellentesque eget laoreet metus. Curabitur rhoncus consectetur nulla, id imperdiet nulla pellentesque sit amet. Cras sodales arcu ac orci suscipit pulvinar sollicitudin risus gravida. Praesent condimentum erat sit amet ipsum tristique mattis. Cras dolor ante, hendrerit vel suscipit a, pellentesque sit amet felis. Vivamus suscipit, tellus ut sollicitudin pulvinar, odio urna auctor quam, ut bibendum ipsum arcu ac nibh. Phasellus sollicitudin, ipsum at pretium consectetur, arcu nisi auctor quam, a lobortis erat neque viverra diam. Nam congue libero sed est gravida dignissim. Nulla pulvinar condimentum diam in porta. Aenean id interdum odio. Fusce cursus sagittis urna dictum scelerisque. Sed nunc massa, cursus et pharetra at, ullamcorper vel est. Aliquam erat volutpat. Ut accumsan commodo lorem, gravida rutrum diam venenatis eu.</p>
    <p id="p2">stibulum nisl orci, viverra in sollicitudin sed, iaculis vel erat. Nam lacus quam, volutpat et porta non, consequat ac tortor. Fusce non lorem vitae libero imperdiet convallis. Morbi vestibulum viverra ligula, porttitor dapibus justo dictum ut. Pellentesque eget laoreet metus. Curabitur rhoncus consectetur nulla, id imperdiet nulla pellentesque sit amet. Cras sodales arcu ac orci suscipit pulvinar sollicitudin risus gravida. Praesent condimentum erat sit amet ipsum tristique mattis. Cras dolor ante, hendrerit vel suscipit a, pellentesque sit amet felis. Vivamus suscipit, tellus ut sollicitudin pulvinar, odio urna auctor quam, ut bibendum ipsum arcu ac nibh. Phasellus sollicitudin, ipsum at pretium consectetur, arcu nisi auctor quam, a lobortis erat neque viverra diam. Nam congue libero sed est gravida dignissim. Nulla pulvinar condimentum diam in porta. Aenean id interdum odio. Fusce cursus sagittis urna dictum scelerisque. Sed nunc massa, cursus et pharetra at, ullamcorper vel est. Aliquam erat volutpat. Ut accumsan commodo lorem, gravida rutrum diam venenatis eu.</p>
</div>

代码解释 鼠标向上移动时，所选文本以HTML格式抓取。然后它获取高亮区域内的所有html，并找到此html匹配的第一个实例。然后，整个高亮显示区域的html被分割成一个子字符串shortenedHtml，它是用户选择之前该区域的html。然后计算跨度。如果开始跨距和结束跨距的数量相等，那么只需检查选择区域计数即可。但是，如果有更多的跨距开始，则此选择将在当前高亮显示的另一个区域内开始，因此不要添加跨距开始标记，只添加一个结束标记

它还检查所选html内部是否有相同的想法，确保span标记不会断裂。从我所知道的情况来看，这个位工作得非常完美——选择中任何多余的span标记都会被删除，以获得干净的输出

代码问题： 好的，到目前为止，我有一个突出的工作，但它是非常童车。如果将警报保存在其中，那么很明显，它不起作用的原因是索引变得混乱。基本上，如果你只选择了一半的单个字符，它会认为你选择了该字符的第一个实例。。。有没有办法在range函数中获取索引的实例？如果没有，还有更好的方法吗？我正在考虑选择整个单词，我可以只搜索第一个空格，但在这些索引工作之前，我甚至不能开始搜索

我在想，是否有一种方法可以在getSelectionHtml函数中的选择周围添加一个临时范围，我可以搜索并删除它

请注意-我不需要嵌套表等高亮显示功能

---

非常感谢

您能为此制作一个JSFIDLE吗？没有人会读那么多代码行。只发布与您的问题相关的代码。当然，在这里！：你能更详细地描述一下你想要达到的目标吗？@j809这就是为什么我解释了我需要什么以及应该放在哪一点上。。。

<div id="highlightable">
    <p id="p1">stibulum nisl orci, viverra in sollicitudin sed, iaculis vel erat. Nam lacus quam, volutpat et porta non, consequat ac tortor. Fusce non lorem vitae</p>
    <p>libero imperdiet convallis. Morbi vestibulum viverra ligula, porttitor dapibus justo dictum ut. Pellentesque eget laoreet metus. Curabitur rhoncus consectetur nulla, id imperdiet nulla pellentesque sit amet. Cras sodales arcu ac orci suscipit pulvinar sollicitudin risus gravida. Praesent condimentum erat sit amet ipsum tristique mattis. Cras dolor ante, hendrerit vel suscipit a, pellentesque sit amet felis. Vivamus suscipit, tellus ut sollicitudin pulvinar, odio urna auctor quam, ut bibendum ipsum arcu ac nibh. Phasellus sollicitudin, ipsum at pretium consectetur, arcu nisi auctor quam, a lobortis erat neque viverra diam. Nam congue libero sed est gravida dignissim. Nulla pulvinar condimentum diam in porta. Aenean id interdum odio. Fusce cursus sagittis urna dictum scelerisque. Sed nunc massa, cursus et pharetra at, ullamcorper vel est. Aliquam erat volutpat. Ut accumsan commodo lorem, gravida rutrum diam venenatis eu.</p>
    <p id="p2">stibulum nisl orci, viverra in sollicitudin sed, iaculis vel erat. Nam lacus quam, volutpat et porta non, consequat ac tortor. Fusce non lorem vitae libero imperdiet convallis. Morbi vestibulum viverra ligula, porttitor dapibus justo dictum ut. Pellentesque eget laoreet metus. Curabitur rhoncus consectetur nulla, id imperdiet nulla pellentesque sit amet. Cras sodales arcu ac orci suscipit pulvinar sollicitudin risus gravida. Praesent condimentum erat sit amet ipsum tristique mattis. Cras dolor ante, hendrerit vel suscipit a, pellentesque sit amet felis. Vivamus suscipit, tellus ut sollicitudin pulvinar, odio urna auctor quam, ut bibendum ipsum arcu ac nibh. Phasellus sollicitudin, ipsum at pretium consectetur, arcu nisi auctor quam, a lobortis erat neque viverra diam. Nam congue libero sed est gravida dignissim. Nulla pulvinar condimentum diam in porta. Aenean id interdum odio. Fusce cursus sagittis urna dictum scelerisque. Sed nunc massa, cursus et pharetra at, ullamcorper vel est. Aliquam erat volutpat. Ut accumsan commodo lorem, gravida rutrum diam venenatis eu.</p>
</div>