Wickeln Sie den Highlight-Text mit span-Element in JQuery oder JavaScript

Question

Dies ist mein Code, aber es gibt einen Fehler, wenn Sie den markierten Text überschreiben.
Der Fehler ist:

Uncaught InvalidStateError: Failed to execute 'surroundContents' on 'Range': The Range has partially selected a non-Text node.

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

Versuchen Sie stattdessen:

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); 
}