0

下面给出了一个示例 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>

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

情景一——

用户选择文本

Text 1_1

在网页中

情景2——

用户选择文本

Text 1  Text 1_1  Text 1_2

在网页中。

场景 3-- 用户选择以下文本 Text 1 Text 1_1 Text 1_2 Text 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 的文本内容等于用户选择的文本（图像可以被忽略，链接的文本只有用户选择了常规文本）？

4

1 回答 1

0

Sounds to me as though you want the commonAncestorContainer property of the selection range. Note that it could be a text node or an element. I'm using Rangy below for IE < 9 compatibility but if you don't need that then you could just use window.getSelection() instead of rangy.getSelection().

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

If you want the innermost element (rather than potentially a text node) that contains the selection, do a simple check of commonAncestorContainer's node type:

if (selContainerNode.nodeType == 3) {
    selContainerNode = selContainerNode.parentNode;
}
于 2012-08-06T11:19:19.273 回答