如何知道所选文本是否在特定 div 内

Question

我有两个 div，如下所示：

<div id="div1">
<p>something</p>
<div><table><tr><td>Div1</td></tr></table></div>
</div>
<div id="div2">
<p>something else</p>
<div><table><tr><td>Div2</td></tr></table></div>
</div>
<button type="button">Check</button>

现在，我想知道何时选择某些文本然后按下按钮，所选文本是否位于“div1”下。我怎样才能做到这一点？

编辑：该解决方案必须在 IE-7 及更高版本中工作。

Answer 1

2022 答案

下面的 elementContainsSelection() 函数返回一个布尔值，表示指定元素是否包含用户的全部选择并适用于所有现代浏览器。

function elementContainsSelection(el) {
    var sel = window.getSelection();
    if (sel.rangeCount > 0) {
        for (var i = 0; i < sel.rangeCount; ++i) {
            if (!el.contains(sel.getRangeAt(i).commonAncestorContainer)) {
                return false;
            }
        }
        return true;
    }
    return false;
}

<input type="button" onmousedown="alert(elementContainsSelection(document.getElementById('cake')))" value="Selection contained in 'slice of cake'?">

<div contenteditable="true">
    Cup of tea and a <b id="cake">slice of cake</b>
</div>

2011 答案

下面的 elementContainsSelection() 函数返回一个布尔值，表示指定元素是否包含用户的整个选择，并且适用于所有主要浏览器，包括 IE 6。

现场演示：http://jsfiddle.net/eT8NQ/

代码：

function isOrContains(node, container) {
    while (node) {
        if (node === container) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

function elementContainsSelection(el) {
    var sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            for (var i = 0; i < sel.rangeCount; ++i) {
                if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) {
                    return false;
                }
            }
            return true;
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        return isOrContains(sel.createRange().parentElement(), el);
    }
    return false;
}

Answer 2

您可以观察每个 div 上的 mouseup 事件，并将以下方法绑定到它：

var endpoint = null
function getselected(event){
  endpoint = event.target;
  var t = '';
  if(window.getSelection){
    t = window.getSelection();
  }else if(document.getSelection){
    t = document.getSelection();
  }else if(document.selection){
    t = document.selection.createRange().text;
  }
  return t;
}

然后此方法将返回选定的文本，它会告诉您选择过程在触发该事件的 div 上结束。如果您需要起点，则必须将 mousedown 事件绑定到 div，这会将元素 id 存储在变量中，以便您可以确定选择过程的起点和终点，并找出中间有哪些 div。

var startpoint = null;
function beginSelection(event){
  startpoint = event.target;
}

如果 getSelected 方法返回空字符串，则应重置起点和终点。

Answer 3

像这样的东西：

function checkSelection() {
    function checkNode(node) {
        do {
            if(node.id == "div1")
                return true;
        } while(node = node.parentNode);

        return false;
    }

    if(window.getSelection) {
        var selection = window.getSelection();
        for(var i = 0, l = selection.rangeCount; i < l; i++) {
            var range = selection.getRangeAt(i), start = range.startContainer, end = range.endContainer;
            if(checkNode(start) || (start != end && checkNode(end)))
                return true;
        }
    }

    if(window.scelection && window.selection.createRange) {
        var range = window.selection.createRange();
        if(range)
            return checkNode(range.parentElement());
    }

    return false;
}