用html内容替换ChildNode值

Question

Iam尝试用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>