有没有办法通过多个元素选择文本？

Question

 var range = document.createRange(); var root_node = document.getElementById("test"); // Start at the `hello` element. range.setStart(root_node.childNodes[0], 2); // End in the `world` node range.setEnd(root_node.childNodes[1], 2); range.selectNodeContents(root_node); let sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);

 <div id="test"> <a href="#">hello</a> <span>world</span> </div>

我想选择文本，但因为它在不同的元素中，所以一直没有用。 有没有办法做到这一点？

我并不是要突出显示整个单词，而是要突出显示每个单词的一部分。

Answer 1

@Matt 的回答是正确的，但没有达到 OP 的要求，即“跨越”多个元素（节点）的范围，同时在这些元素中使用偏移量。

以下实现它：

 var range = document.createRange(); var root_node = document.getElementById("test"); range.setStart(root_node.querySelector('a').firstChild, 2); range.setEnd(root_node.querySelector('span').firstChild, 3); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);

 <div id="test"> <a href="#">hello</a> <span>world</span> </div>

请注意我们如何在setStart和setEnd上传递一个text节点 - 这是锚点和跨度元素的firstChild节点。

有关此主题的进一步阅读，请参阅此出色的解释。

Answer 2

您调用了setStart两次，而不是setStart后跟setEnd ，并且您在每种情况下都指定了 2 的偏移量，但我认为您不需要偏移量，因为这会使您的节点索引超出范围（并引发错误）。

 var range = document.createRange(); var root_node = document.getElementById("test"); // Start at the `hello` element. range.setStart(root_node.childNodes[0], 0); // End in the `world` node range.setEnd(root_node.childNodes[1], 0); range.selectNodeContents(root_node); let sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);

 <div id="test"> <a href="#">hello</a> <span>world</span> </div>