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)

使用纯js从html标签解包所选文本

1 个答案: