javascript - getSelection.toString() - 不使用 toString()？

Question

我需要从所选内容中提取文本并将其发送到 TTS 服务。 TTS 服务将返回一个流 URL 和每个单词的一组索引，指示它们的开始和结束位置(时间和文本)。

当用户播放流时，我想在读出每个单词时突出显示它们。为此，我不能只使用每个单词的文本索引，因为它们无法让我返回到原始 HTML 节点 - 因此我不能使用 toString()这是严格的文本。

到目前为止，我正在做的是使用范围对象的开始和结束容器创建一个 TreeWalker，并使用它来提取范围中的所有文本节点。

问题: window.getSelection().toString()本质上会忽略未显示的节点。其中包括<script>节点，<style>节点，具有 display: none; 的节点和喜欢的。使用 TreeWalker 则不会。

我知道我可以手动跳过 TreeWalker 中的所有这些节点(如 getSelection without alt attribute and scripts in it? 中的建议)，但它可能会变得非常复杂，非常快(特别是检查每个节点的可见性)。

在讨论这个问题之前，我想问一下，自从我链接的问题得到解答以来，是否出现了任何新的方法或可用的库？

我不打算让代码跨浏览器，并且我使用的是纯 Javascript(即没有 jQuery)。

Answer 1

首先，我现在建议不要使用window.getSelection().toString()。它的行为因浏览器而异，有 currently no spec for it 。 HTML5 规范的一个草案版本要求它应该返回在每个选择范围上调用 toString() 结果的串联，这就是 IE 9 所实现的； WebKit 和 Mozilla 都做一些更复杂的事情。此外，WebKit 和 Mozilla 的做法存在差异，它们可以随时更改其实现。

冒着推销我自己的东西的风险，您也许可以使用 TextRange module我的Rangy库，它试图提供以用户看到的文本形式导航 DOM 和其中范围的方法。另一种方法是自己做大量类似的工作或限制您的代码可以使用的 HTML。