Javascript 删除所选内容的直接父节点（<；b>；）

我只需单击

标签，即可将其删除并添加到所选文本中

我已经可以通过以下方式将所选文本括在

标记中：

if (window.getSelection) 
{
    selection = getSelection();

    var newNode = document.createElement("b");
    range.surroundContents(newNode);        
}

现在，我想有一个方法来删除我之前添加的

标记，但通常显示的使用

range.commonAncestorContainer

的方法会给我提供

类型的最低父级

作为调试的一部分，我只是修改了用于添加

标记的代码（为了确保我有一个标记，我也首先添加了它）以删除父节点

if (window.getSelection) {
    selection = getSelection();

    var newNode = document.createElement("b");
    range.surroundContents(newNode);
    node = range.commonAncestorContainer;
    node.remove();
}

这将删除新添加的

标记的父

，而不仅仅是

标记本身

以下是HTML供参考：

<div contenteditable="true" id="input" class="inputblock" onclick="getClick()" onkeypress="changeNodeType(event)" data-text="Please paste your text here."></div>

标记将在粘贴到显示的

中的文本中创建

---

它同时删除内容的事实可以忽略。我会找到一种方法来解决这个问题。

不幸的是，我没有足够的时间来编写完整的代码解决方案，但我过去就是这样解决的：

使你的射程正常化。这是最难的部分。IE、edge和不同的浏览器表现不同，因此您需要处理许多特殊的edge情况。例如，如果范围正好在空文本节点之前，IE将做一些不可靠的事情

对于开始和结束容器，如果它们是文本节点，则不执行任何操作

否则，您需要使用

NodeIterator

进行顺序遍历，并遍历到开始容器的下一个节点，以及结束容器的上一个节点。这解决了这样的情况：当您选择类似于

hello

的内容时，选择可以是

|hello |

或

| hello |

。通过规范化和遍历树，在这两种情况下，您将得到一个几乎相当于

| hello |

的选择。如果没有图片，很难解释这一点，因此我建议您画出DOM树，走到开始容器的下一个最里面的子容器和结束容器的前一个最里面的子容器。

一旦你安顿下来，你就可以开始向树上走去，找到一个醒目的标签。这只是

节点。包含（'b'）

对“开始”和“结束”节点都执行此操作，然后查看是否指向相同的粗体标记，以及文本内容是否与所选内容相同

如果是这样的话，你已经找到了核弹的醒目标签

---

这是一个非平凡的代码量，它需要一系列测试，因为在浏览器中设置选择和范围时，边缘情况非常不稳定。我与contenteditable斗争了很长一段时间：-）我祝你好运

我没有看到任何HTML，所以我不知道这个

是否在你说的地方，或者这个

和文本作为

的父项与

相关，而

的文本是

的文本节点兄弟？如果

掉进森林里，周围没有人发出任何噪音，我在中编辑了这个。“”之间的差异是什么？