如何获取包含当前选择的DOM元素？

You can select a part of a web page with the mouse.

您可以使用鼠标选择网页的一部分。

I know that I can get the currently selected text but how can I get the DOM element which contains the start or end of the current selection?

我知道我可以获取当前选中的文本，但是如何获取包含当前选择的开头或结尾的DOM元素？

2 个解决方案

#1

In IE, use document.selection.createRange().parentElement() and in real browsers use window.getSelection().getRangeAt(0).startContainer.parentNode. Something like this:

在IE中，使用document.selection.createRange（）。parentElement（），在实际浏览器中使用window.getSelection（）。getRangeAt（0）.startContainer.parentNode。像这样的东西：

function getSelectedNode()
{
    if (document.selection)
        return document.selection.createRange().parentElement();
    else
    {
        var selection = window.getSelection();
        if (selection.rangeCount > 0)
            return selection.getRangeAt(0).startContainer.parentNode;
    }
}

#2

The following will return the container element of the start or end boundary of the current selection, using the boolean isStart to specify whether you want the start or end boundary. It will work in most mainstream browsers. Add feature tests for more robustness.

以下将返回当前选择的起始或结束边界的容器元素，使用boolean isStart指定是否需要开始或结束边界。它适用于大多数主流浏览器。添加功能测试以获得更强大的功能。

function getSelectionBoundaryElement(isStart) {
    var range, sel, container;
    if (document.selection) {
        range = document.selection.createRange();
        range.collapse(isStart);
        return range.parentElement();
    } else {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            }
        } else {
            // Old WebKit
            range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);

            // Handle the case when the selection was selected backwards (from the end to the start in the document)
            if (range.collapsed !== sel.isCollapsed) {
                range.setStart(sel.focusNode, sel.focusOffset);
                range.setEnd(sel.anchorNode, sel.anchorOffset);
            }
       }

        if (range) {
           container = range[isStart ? "startContainer" : "endContainer"];

           // Check if the container is a text node and return its parent if so
           return container.nodeType === 3 ? container.parentNode : container;
        }   
    }
}