ChildNodeの値をhtmlのコンテンツに置き換えてください。

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

更新（完全なコード）。あなたは、テキストではなくHTMLコンテンツを変更しますtextContentを使用している

<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の代わりにinnerHTMLを使用するようにしてください：この意志が役立ちます

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

希望を。 `htmlreplace（）が`定義さ

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>