我正在尝试用 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]);
}
}
}
最佳答案
您使用的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>
关于javascript - 用 html 内容替换 ChildNode 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38203258/