使用本机javascript的文本高亮显示无jquery

我目前使用的是原生JS，我正在尝试在contenteditable div中构建突出显示文本功能。我已经成功构建了突出显示功能，但当我想使用单个按钮在突出显示文本和非突出显示文本之间切换时遇到了一个问题。因此，我通过

var selectedText = window.getSelection();
var range = selectedText.getRangeAt(0);

我正在使用作为范围对象函数的surroundContents包装所选文本

var wrapper = document.createElement("span");
wrapper.setAttribute("class","highlight");

但现在，当我试图取消高亮显示文本的某些部分和纯文本的某些部分时，自然行为应该取消高亮显示文本并高亮显示纯文本。为了实现这一点，我正在通过

var clone = range.cloneContents()
var nodeInBetween = clone.childNodes //array of nodes between the start and end nodes.

---

现在我面临两个问题。首先，我需要删除span.highlight节点并再次将其替换为TextNode，以使其不高亮显示，并且我需要一些方法将TextNode包装为span。不幸的是，没有办法像包装范围变量那样包装textnode。

我在中尝试了一种（递归）高亮方法。它可能对你有用。实际方法：

function highLight(term,root,forElements,styleclass){
    root = root || document.querySelector('body');
    term = term instanceof Array ? term.join('|') : term;

    if (!term) {throw TypeError('Highlighter needs a term to highlight anything');}

    forElements = forElements && forElements instanceof Array 
                    ? forElements.join(',') 
                    : /string/i.test(typeof forElements) ? forElements : '*';
    styleclass = styleclass || 'highlight';

    var allDiv = root.querySelectorAll(forElements),
        re = RegExp(term,'gi'),
        highlighter = function(a){return '<span class="'+styleclass+'">'+a+'</span>'};

    for (var i=0; i<allDiv.length; i+=1){
        // recurse children
        if (allDiv[i].querySelectorAll(forElements).length){
            highLight.call(null,term, allDiv[i],forElements,styleclass);
        }
        // replace term(s) in text nodes
        var node = allDiv[i];
        for (node=node.firstChild; node; node=node.nextSibling) {
            if (node.nodeType===3){
                var re = RegExp(term,'gi');
                node.data = node.data.replace(re,highlighter);
            }
        }

    }
    //finally, replace all text data html encoded brackets
    root.innerHTML = root.innerHTML
                      .replace(/&lt;/gi,'<')
                      .replace(/&gt;/gi,'>');
}

函数突出显示（术语、根、前元素、样式类）{
root=root | | document.querySelector（'body'）；
term=数组的term实例？term.join（“|”）：term；
if（！term）{throw TypeError（'Highlighter需要一个术语来突出显示任何内容'）；}
forElements=数组的forElements&&forElements实例
？forelement.join（“，”）
：/string/i.test（前元素类型）？前元素：'*'；
styleclass=styleclass | |“突出显示”；
var allDiv=root.querySelectorAll（forElements），
re=RegExp（术语“gi”），
highlighter=函数（a）{return'+a+'}；
对于（var i=0；i