Question

查看下面HTML页面中的代码片段 -

<div id="div2"> Text2 </div>

现在，用户只从浏览器网页中显示的文字中选择“Te”...

如何检查用户是否选择了id = div2的整个div内容？

我知道如何获取与用户选择的内容相对应的节点列表 - 但在这种情况下，由于用户只选择了“Te” - 只获得了一个节点 - 即包含文本的文本节点“Te”......因此我很困惑......

检查用户选择是否包含整个Div（或p）的最简单方法是什么？

还有一个问题是，如果用户选择了多个div的内容，那么如何检查这些（多个）div中的每一个是否已被选中？

例如，请查看下面的HTML代码段

 <div id="div1"> Text1 </div>
 <div id="div2"> Text2 </div>
 <div id="div3"> Text3 </div>

在这里，用户选择了以上所有3个div的文本......

最后，如果用户选择了多个div的内容，所有这些div都在一个父div中，那么如何检查用户是否选择了该父div的整个内容，还是仅选择了某些内容？父div也可能包含其他div，p元素，图像和链接......

我不介意为此目的使用纯js或像jquery这样的库......

Answer 1

我最终得到了这个，但它可能不是完美的，只是尝试一下，可能会给你一些想法，或者可能是其他人可以做得更好

function getSelectedText()
{
    var t = '';
   if(window.getSelection) t = window.getSelection();
   else if(document.getSelection) t = document.getSelection();
   else if(document.selection) t = document.selection.createRange();  
   if(t)
   { 
       return {
           selectedText:t.text ? t.text : t.toString(),
           fullContent:t.anchorNode ? t.anchorNode.nodeValue : t.parentElement().innerHTML
      };
    }
}


$(function(){
    $(document).on('mouseup', function(){
        var selection=getSelectedText();
        if(selection.selectedText)
        {
            var selected = $.trim(selection.selectedText);
            var full = $.trim(selection.fullContent);
            if(selected!=full) alert('Full content is not selected');
            else alert('Full content is selected');
         }
    });
});

DEMO

Answer 2

我的Rangy库提供了Range对象的containsNodeText()方法，该方法不是DOM Range标准的一部分。看起来这对您的所有问题都有帮助。

var div2 = document.getElementById("div2");
var sel = rangy.getSelection();
var divTextIsSelected = false;
if (sel.rangeCount) {
    divTextIsSelected = sel.getRangeAt(0).containsNodeText(div2);
}

Answer 3

第一个问题怎么样？

window.getSelection().focusNode.nodeValue === window.getSelection()

请注意，focusNode是包含所选内容的元素，anchorNode是包含所选内容的元素。

在第二个问题中，您可以尝试使用类似

的方式向上遍历DOM

window.getSelection().getRangeAt(0).commonAncestorContainer

getRangeAt(0)检索第一个连续的选定元素容器范围。（如果用户执行了ctrl + select类型的操作，您将拥有多个。）

以下是一些案例：

window.getSelection().getRangeAt(0).startOffset === 0。
window.getSelection().getRangeAt(0).endOffset === window.getSelection().getRangeAt(0).endContainer.length如果选择了所有最后一个元素。

如果要显式检查每个元素，请查看此帖子中元素的遍历方式：Get all DOM block elements for selected texts

Answer 4

我为你做了这个例子，看看：

直播演示： http://jsfiddle.net/oscarj24/FsZcV/

用户选择了一些内容 - 现在我想看看用户是否在div中选择了整个内容

4 个答案: