Question

以下是一个示例HTML页面代码段---

<div id="maindiv">
    <div id="div1">
      Text 1 
      <div id="div1_1"> Text 1_1 </div>
      <div id="div1_1"> <a href="http://google.com/">Text 1_2</a> </div> 
    </div>
    <div id="div2"> Text 2  </div>
</div>

现在有几个场景，上面包含文字的网页显示在浏览器中，用户选择浏览器中显示的一些文字 -

情景1--

用户选择文字

Text 1_1

在网页

中

情景2 -

用户选择文字

Text 1  Text 1_1  Text 1_2

在网页中。

情景3-- 用户选择以下文本文本1文本1_1文本1_2文本2

情景4-- 用户选择以下文字

Text 1_2 Text 2

现在我想使用最常用的节点Javascript获取，其全部内容已由用户选择。这是方案1中的单个div。 “div1_1”，方案2即。 “div1”和场景3即。 “maindiv”，但在方案4中，div1_2的整个内容以及div2的整个内容被选中 - 即这些内容已被选中的2个div不是兄弟姐妹。因此，我想要为方案4提取的结果是“div1_2”和“div2”。

如何提取div如上所述？我已经提到过在这里使用rangy，因为它非常有用并且具有超出标准JS DOM的一些功能，但我愿意使用任何其他JS库，如JQuery，甚至是纯Javascript。

我想在这里添加/询问的另一件事......即使有更多的图像，任何div中的更多链接，并且用户的选择包括那些图像/链接，那么我将如何提取最上面的div ，这样div的文本内容等于用户选择的文本（图像可以被忽略，链接的文本只有用户选择了普通文本）？

Answer 1

听起来好像你想要选择范围的commonAncestorContainer属性。请注意，它可以是文本节点或元素。我正在使用Rangy以下IE＆lt; 9兼容性但如果您不需要，则可以使用window.getSelection()代替rangy.getSelection()。

var sel = rangy.getSelection();
var selContainerNode = null;
if (sel.rangeCount > 0) {
    selContainerNode = sel.getRangeAt(0).commonAncestorContainer;
}

如果您想要包含选择的最内层元素（而不是可能是文本节点），请对commonAncestorContainer的节点类型进行简单检查：

if (selContainerNode.nodeType == 3) {
    selContainerNode = selContainerNode.parentNode;
}

javascript-如何使用纯JS / jquery / rangy /其他lib来获取网页中的最高级别节点，其整个文本内容已由用户选择

1 个答案: