javascript - 使用纯 js 从 html 标签中解包选定的文本

Question

我正在使用 javascript 中的 contenteditable 开发一个简单的文本编辑器。不幸的是，我不能使用 document.execCommand 并且必须自己实现它。我创建了一个使我的文本加粗的函数。这是函数:

document.getElementById("bold").onclick = function() {
  var selection = document.getSelection(),
      range = selection.getRangeAt(0).cloneRange();
  range.surroundContents(document.createElement("b"));
  selection.removeAllRanges();
  selection.addRange(range);
}

<div id="editor" contenteditable="true">This is the contenteditable</div>
<button id="bold">Bold</button>

现在，当用户在文本已经是粗体的情况下单击粗体按钮时，我想取消对文本的加粗。换句话说，我希望文本不再是粗体。

我该怎么做？是否有任何与 range.surroundContents 或类似的东西相反的东西？

请注意，我只希望将选定的文本取消加粗，而不是文档中的所有加粗文本，因此 jQuery 的 unwrap() 可能无法正常工作。我正在寻找一个 Vanilla js 解决方案和一些优雅和简单的东西，但如果它必须复杂，我会很感激对代码的一些解释。非常感谢。

Answer 1

存储创建的元素:

let b = document.createElement("b");
range.surroundContents(b);

要展开，将每个子元素移动到 b 元素之前，然后删除 b 元素:

while (b.firstChild) {
    b.parentNode.insertBefore(b.firstChild, b)
}

b.parentNode.removeChild(b)