如何在javascript中删除所选文本周围的类名跨度

Question

我正在使用 javascript 突出显示选定的文本并在用户需要时删除选定的文本。
我几乎完成了所有工作，但是在删除所选文本的样式时我被卡住了。
我想删除所选文本周围类名highlight 的跨度，但不删除所选文本中已经可用的其他样式。

这里是the plunk I've made：

function removeHighlight() {
  var sel = window.getSelection();
  if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    var selectedTextNode = document.createTextNode(range.toString());
    console.log(selectedTextNode);
    range.deleteContents();
    range.insertNode(selectedTextNode);
    range.selectNode(selectedTextNode);
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

删除选定文本周围突出显示的跨度的正确方法是什么？

Answer 1

你可以使用classList属性的remove方法：

// Get all the spans that have the highlight class
var spans = document.querySelectorAll("span.highlight");

// Loop over the spans and remove the classs
for(var i = 0; i < spans.length; i++){
  spans[i].classList.remove("highlight");
}