用JQuery或JavaScript中的span元素包装高亮文本

Question

这是我的代码，但是如果您覆盖突出显示的文本则会出错 错误是：

  

未捕获的InvalidStateError：无法执行'surroundContents'   'Range'：Range已部分选择了非Text节点。

JS

function surroundSelection() {
  var span = document.createElement("span");
  span.setAttribute('class', 'hlt')

  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var range = sel.getRangeAt(0).cloneRange();
      range.surroundContents(span);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
}     

Answer 1

请改为尝试：

function surroundSelection() {       
    var selection= window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span= document.createElement("span");
    span.setAttribute('class', 'hlt')
    span.appendChild(selectedText);
    selection.insertNode(span);
}