找到用户选择的“最大公用div”

Question

你好，你们这些可笑的天才！

所以我正在创建一个基本的文字处理器，我需要有一个选项来清除某个部分的格式。用户输入的地方被分成几个不同的 div，每当他们按 Enter 键时，它就会启动一个新的 div。当他们添加样式选项（Bold、italics 等）时，它会宣传正确的 html 标记。

好吧，我希望用户能够清除他们突出显示的文本的所有格式。为此，我需要找到所有人共享的元素。所以如果它以这样的结构显示“这是我的文本”：

<div id="1">
    <div>Here</div>
    <div>is</div>
    <div>some</div>
    <div>text</div>
</div>

并且用户突出显示了所有 4 个单词，我需要计算机给我 id 为“1”的 div，因为这是它们的共同点。

我完全被这个难住了，完全不知道从哪里开始，所以我真的没有任何代码给你。我将使用window.getSelected(); 来获取实际文本，但我不知道如何找到它周围的 div。

感谢您的帮助！

Answer 1

如果您使用window.getSelection()，它将返回一个选择对象，其中包含属性.anchorNode 和.focusNode，它们是选择开始和结束的节点。然后，您可以使用这些节点沿着父链向上查找您想要的任何级别的父节点。

通过获取第一个对象的直接父对象，然后查看它是否也是第二个对象的父对象，可以找到最接近的公共父对象。如果没有，请提高一个父级，直到最终找到一个共同的父级。

function findCommonParentElement(startNode, endNode) {

    // see if node has a particular parent 
    // by walking up the parent chain and comparing parents
    function hasParent(node, parent) {
        while (node && node !== parent && node !== document.body) {
            node = node.parentNode;
        }
        return node === parent;
    }

    // for text nodes, get the containing element
    // for elements, just return what was passed in
    function getElement(node) {
        while (node && node.nodeType !== 1) {
            node = node.parentNode;
        }
        return node;
    }

    // go up the parent chain of endNode looking for a node 
    // that startNode has as a parent    
    while (endNode && !hasParent(startNode, endNode)) {
        endNode = endNode.parentNode;
    }
    // return the containing element - so it won't return a textnode
    return getElement(endNode);
}

// Usage:
var sel = window.getSelection();
var commonParent = findCommonParentElement(sel.anchorNode, sel.focusNode);

工作演示：http://jsfiddle.net/jfriend00/GV96w/