有沒有辦法通過多個元素選擇文本？

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>