javascript - 替换后 insideHTML 不呈现

Question

我正在尝试在页面中突出显示某些单词。为了实现这一目标，我想找到所有文本节点，并仅用将突出显示它的跨度替换特定单词。该代码似乎可以正确搜索并找到文本节点中的单词，但替换不起作用。我明白了:

foo

我想得到这个:
foo(带有突出显示的背景)

function toRegExp(text) {
    return new RegExp(text, 'g');
}

function toSpan(text) {
    return '<span style="background-color: #FBC300;">' + text + '</span>';
}

function replaceText(squery, node) {
    node = node || document.getElementById("mainContent"); // base node

  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) {
        if (node.innerHTML) {
            node.innerHTML = node.innerHTML.replace(toRegExp(squery), toSpan(squery));
          } else { // support to IE
            node.nodeValue = node.nodeValue.replace(toRegExp(squery), toSpan(squery));
          }
    }
    else replaceText(squery, node);
  }
}

Answer 1

文本节点不能包含元素，因此您需要获取文本节点并将其拆分为多个节点。例如，如果您想突出显示 world在hello world ，您需要将其拆分为文本节点 hello和一个元素 <span>world</span> ，然后您可以对其进行样式设置。像这样的事情:

function replaceText(squery, node) {
    node = node || document.getElementById("mainContent"); // base node

    for (node = node.firstChild; node; node=node.nextSibling) {
        if (node.nodeType == 3 && node.nodeValue) {
            var pieces = node.nodeValue.split(squery);
            if (pieces.length > 1) {
                // Split this node up into pieces
                for (var i = 0; i < pieces.length - 1; i++) {
                    node.parentNode.insertBefore(document.createTextNode(pieces[i]), node);

                    var span = document.createElement('span');
                    span.style.backgroundColor = '#FBC300';
                    span.innerText = squery;
                    node.parentNode.insertBefore(span, node);
                }
                node.nodeValue = pieces[pieces.length - 1];
            }
        }
        else
            replaceText(squery, node);
    }
}