我试图用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]);
}
}
}
答案 0 :(得分:0)
您正在使用会更改文字而不是HTML内容的textContent
,请尝试使用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>