有没有办法通过多个元素选择文本? [英] Is there a way to select text through multiple elements?

问题描述

var range = document.createRange();var root_node = document.getElementById("test");//从 `hello` 元素开始.range.setStart(root_node.childNodes[0], 2);//在 `world` 节点结束range.setEnd(root_node.childNodes[1], 2);range.selectNodeContents(root_node);让 sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);

<a href="#">你好</a><span>世界</span>

我想选择文本，但因为它位于不同的元素中，所以一直无法使用.有没有办法做到这一点?

我不是要突出显示两个词的全部内容，而是要突出显示每个词的一部分.

解决方案

@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);

<a href="#">你好</a><span>世界</span>

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

有关此主题的进一步阅读，请参阅此优秀解释.

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>

I'd like to select text but because it's in different elements it hasn't been working. Is there a way to do this?

I don't mean to highlight both words in their entirety but portions of each word.

解决方案

@Matt answer is in the right direction, but doesn't achieve what the OP wants, which is to "span" the range across multiple elements (nodes), while using offsets within those elements.

The following achieve it:

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>

Note how on both setStart and setEnd we pass a text node - this is the firstChild of the anchor and span elements.

For further reading on this subject, please refer to this excellent explanation.

这篇关于有没有办法通过多个元素选择文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！