javascript - 用 html 内容替换 ChildNode 值

Question

我正在尝试用 html 内容替换节点值。但是当我尝试这个时，html 标签显示在 html 页面中，而不是应用的样式。

<style>
    .YellowSelection {
        background: yellow;
    }
</style>

var capturedText = 'test';
var changedText = '<span class="YellowSelection">test</span> Day';
htmlreplace(capturedText, changedText);

function htmlreplace(capturedText, changedText, element) {  

var nodes = element.childNodes;
for (var n=0; n<nodes.length; n++) {
    if (nodes[n].nodeType == Node.TEXT_NODE) {
        var r = new RegExp(capturedText, 'gi');
        console.log(nodes[n]);
        nodes[n].textContent  = nodes[n].textContent.replace(r, changedText);
    } else {
        htmlreplace(capturedText, changedText, nodes[n]);
    }
}
}

更新(完整代码)。

<style>
    .YellowSelection {
       color: yellow;
    }
</style>

function returnSelection() {

    var capturedText;
    var changedText;

    capturedText = window.getSelection().toString().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    changedText = '<span class="YellowSelection">' + capturedText + '</span>';


        htmlreplace(capturedText, changedText);

    }
}

function htmlreplace(capturedText, changedText, element) {    
    if (!element) element = document.body;    
    var nodes = element.childNodes;
    for (var n=0; n<nodes.length; n++) {
        if (nodes[n].nodeType === 3) {
            var r = new RegExp(capturedText, 'gi');
            nodes[n].innerHTML = nodes[n].textContent.replace(r, changedText);
        } else {
            htmlreplace(capturedText, changedText, nodes[n]);
        }
    }
}

Answer 1

您使用的textContent将更改文本而不是HTML内容，请尝试使用innerHTML而不是textContent:

nodes[n].innerHTML = nodes[n].textContent.replace(r, changedText);

希望这会有所帮助。

var capturedText = 'test';
var changedText = '<span class="YellowSelection">test</span> Day';

var node_1 = document.getElementById('div1');
node_1.innerHTML = node_1.textContent.replace(capturedText, changedText);

/*********/

var node_2 = document.getElementById('div2');
node_2.textContent = node_2.textContent.replace(capturedText, changedText);

.YellowSelection{
  color: green;  
}

<div id='div1'>Div 1 test</div>
<div id='div2'>Div 2 test</div>