innerHTML 替换后不呈现

Question

我正在尝试让某些词在页面中突出显示。为此，我想找到所有文本节点，并仅用将突出显示它的范围替换特定单词。该代码似乎可以正确搜索并找到文本节点中的单词，但替换不起作用。我明白了：

foo

我想得到这个：
foo（突出显示背景）

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

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

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

对我来说，这很有效：

<html>
    <body>       
        <p>bla test bla</p>
        <script>
            function highlight(text) {
                document.body.innerHTML = document.body.innerHTML.replace(text,'<span style="background-color:red">'+text+'</span>');
            }
            highlight('test');
        </script>        
    </body>
</html>

Answer 2

文本节点不能包含元素，因此您需要将文本节点拆分为多个节点。例如，如果您想在 hello world 中突出显示 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);
    }
}

innerHTML 替换后不呈现

innerHTML not rendering after replace

javascript

replace

innerhtml