Ersetzen von ChildNode-Werten durch HTML-Inhalt

Question

Ich versuche, einen Knotenwert durch einen HTML-Inhalt zu ersetzen. Aber wenn ich das versuche, werden die HTML-Tags in der HTML-Seite anstelle des angewandten Stils angezeigt.

<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]); 
    } 
} 
} 

Aktualisiert (Complete-Code).

<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

Sie verwenden textContent, die den Text und nicht HTML-Inhalt ändern wird, versuchen innerHTML statt textContent zu verwenden:

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

hoffen, dass dies hilft.

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>