Javascript 用户选择了一些内容-现在我想看看用户是否选择了div中的全部内容

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

Text2

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

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

我确实理解如何获取与用户选择的内容相对应的节点列表——但在本例中，由于用户只选择了“Te”——因此只获取单个节点——即包含文本“Te”的文本节点。。。所以我很困惑

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

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

例如，看看下面的HTML代码片段--

Text1
文本2
文本3

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

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

---

我不介意为此使用纯js或类似jquery的库…

您的第一个问题是什么

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

  如果最后一个元素全部选中

---

如果您想显式检查每个元素，请在本文中查看元素是如何遍历的：

我最终得出了这个结论，但它可能不是完美的，请尝试一下，它可能会给您带来一些想法，也可能是其他人可以做得更好

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');
         }
    });
});

---

.

我给你举了个例子，看看：

---

实时演示：

My Rangy library提供了一种不属于DOM范围标准的范围对象方法。看来这对你所有的问题都有帮助

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

---

我认为除了在flash中使用之外，这是不可能的。为什么不简单地用所选文本检查div的innerHMTL呢？@Sam：不，所有主要浏览器都提供一个JavaScript API来访问用户选择。@TimDown我不知道，你能提供一个参考吗？@Sam：如果有3个div，用户选择第一个div中的部分文本，然后是第二个div的全部内容，然后是第三个div中的部分文本——在本例中，我如何确定用户选择了第二个div的全部内容，但只选择了第一个和第三个div的部分文本？另外，您能否提供一个使用包含用户选择的节点的解决方案？这就是我要开始的…谢谢…@Arvind，你说的“使用包含用户选择的节点的解决方案”是什么意思

window.getSelection（）

是用户当前的选择；你的意思与此不同吗？@ZachB-很抱歉，在我之前的评论中，我没有仔细阅读你的解决方案——你正在使用用户的选择。。我留下的唯一疑问是如何处理我在上一条消息中提到的场景（即3个div-用户选择了第一和第三个div的部分以及第二个div的全文）…@Arvind，稍微更改了原始代码，并添加了更多提示。如果您的范围是连续的（应该是连续的），则仅检查开始偏移和结束偏移就足以知道选择了之间的所有节点。

document.getSelection

不推荐使用；我不知道在什么情况下你会有

document.getSelection

，但不会有

window.getSelection

。看到了。很好，即使拖动选择鼠标向上移动事件发生在框架外部或浏览器外部，解决方案仍然有效。谢谢大家，我不仅仅是想回答这个问题，我也在努力学习，所以如果有人有更好的想法，请分享，或者如果你能让它变得更好，你可以编辑它。这对我也有帮助。谢谢@ZachB：我很确定Safari的旧版本（2？3.0？）有

document.getSelection（）

，但没有

window.getSelection（）

，还有选择对象中的各种缺陷。当然，Safari 3.2有

window.getSelection（）

和一个有效的选择对象，所以现在不必担心它。然而，

document.getSelection（）

并没有被弃用：它只是

window.getSelection（）

的别名@蒂姆当谢谢你澄清这一点！我把Mozilla和Netscape的不赞成误认为是W3C的不赞成。OP要求提供一种方法来判断所选文本是否与div中的所有文本相同。这样做只是提醒所选文本？

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');
         }
    });
});

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