查找用户选择"Greatest Common Div"

Question

大家好！

所以我正在创建一个基本的文字处理程序，我需要有一个选项来清除某个部分的格式。用户输入的地方被分成几个不同的div，每当他们点击回车键时，就会启动一个新的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/