用html內容替換ChildNode值

Iam嘗試用html內容替換節點值。但是當我嘗試這個HTML標籤顯示在HTML頁面而不是應用的風格。用html內容替換ChildNode值

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

來源

2016-07-05 locknies

其中'htmlreplace（）'定義？ –

我已經更正了現在的代碼。 Iam更關注這一行 - nodes [n] .textContent = nodes [n] .textContent.replace（r，changedText）; – locknies

您正在設置設置或返回指定節點及其所有後代的文本內容的文本內容。，我想你應該爲innerHTML，如果你想注入的HTML元素 – Deep

您使用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>

來源

2016-07-05 12:31:06

已經試過了。但不工作！我將提供一個完整的代碼示例。 – locknies

請檢查我的更新。 –

讓我檢查一下。其實iam試圖寫一個'鉻擴展'插件，當我嘗試執行此操作時，它不起作用，但它不顯示任何錯誤。 – locknies

用html內容替換ChildNode值

回答

相關問題