从 javascript 中的选择中获取强大的外部元素

Get strong outer element from selection in javascript

本文关键字：外部 元素 选择 javascript 获取      更新时间：2023-09-26

我想在 Javascript 中获取 getSeletion（） 元素的强元素。 我有一个这样的 HTML：

<div contenteditable="true">
  <strong>TEST</strong>
</div>

我已经用这个JavaScript代码测试了它

function getSelectionParentElement() {
        var parentEl = null, sel;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount) {
                parentEl = sel.getRangeAt(0).commonAncestorContainer;
                if (parentEl.nodeType != 1) {
                    parentEl = parentEl.parentNode;
                }
            }
        } else if ( (sel = document.selection) && sel.type != "Control") {
            parentEl = sel.createRange().parentElement();
        }
        return parentEl;
    }

并使用 window.getSelection（）.anchorNode.parentElement 或 selection.getRangeAt（0）.startContainer.parentNode

但它只返回div 而不是强元素。

根据我的测试，当选择仅限于强元素时，您的getSelectionParentElement()函数将返回"强"元素。请看这个小提琴演示：

http://jsfiddle.net/akfg87n6/

如果您仅从 TEST 中选择字母，则它返回

强元素，而如果您从div 中选择字母（我添加了"之前"和"之后"文本以使其成为可能），则它返回div 元素。

根据 https://developer.mozilla.org/en/docs/Web/API/Range commonAncestorContainer()文档，这是预期的：

Range.commonAncestorContainer [只读] 返回包含 startContainer 和 endContainer 节点的最深节点。

当整个文本选择驻留在强元素中时，强元素是包含开始和结束容器节点的最深节点（顺便说一下，在这种情况下，它们都是强元素）。但是，如果所选内容从强元素扩展到div 内容之外，则强元素不再包含整个选择内容，因此commonAncestorContainer()必须返回一个较浅的元素，如果文本选择仍局限于div 内容，则该元素将是div。

解决方案很简单。我使用Rangy。它具有主要浏览器的功能。你可以通过以下方式获取元素：rangy.getSelection（）.focusNode.parentElement.localName

相关文章：