Javascript 用html内容替换ChildNode值

Javascript 用html内容替换ChildNode值,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试用html内容替换节点值。但是当我尝试这样做时,html标签显示在html页面中,而不是应用的样式 <style> .YellowSelection { background: yellow; } </style> var capturedText = 'test'; var changedText = '<span class="YellowSelection">test</span> Day'; ht

我正在尝试用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]);
    }
}
}

.黄色选择{
背景:黄色;
}
var capturedText=‘测试’;
var changedText=‘测试日’;
htmlreplace(capturedText,changedText);
函数htmlreplace(capturedText、changedText、element){
var节点=element.childNodes;

对于(var n=0;n您正在使用将更改文本而非HTML内容的
textContent
,请尝试使用
innerHTML
而不是
textContent

nodes[n].innerHTML = nodes[n].textContent.replace(r, changedText);
希望这会有所帮助

var capturedText='test';
var changedText=‘测试日’;
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{
颜色:绿色;
}
div1测试

Div 2 test
如果您使用的
textContent
将更改文本而不是HTML内容,请尝试使用
innerHTML
而不是
textContent

nodes[n].innerHTML = nodes[n].textContent.replace(r, changedText);
希望这会有所帮助

var capturedText='test';
var changedText=‘测试日’;
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{
颜色:绿色;
}
div1测试

Div 2 test
定义了
htmlreplace()
的位置?我现在已经更正了代码。我更关心这一行-节点[n]。textContent=nodes[n]。textContent.replace(r,changedText);您正在设置文本内容,该内容设置或返回指定节点及其所有子节点的文本内容。我认为如果要插入html元素,您应该为innerHTML提供一个示例,是否可以提供一个示例?在这里不会很有用?where
htmlreplace()
已定义?我现在已更正代码。我更关心这一行-节点[n]。textContent=节点[n]。textContent.replace(r,changedText);您正在设置设置或返回指定节点及其所有子节点的文本内容的文本内容。我认为如果要插入html元素,您应该为innerHTML提供一个示例?在这里不是很有用吗?已经尝试过了。但不起作用!!我将提供一个完整的代码示例。让我检查k这个。实际上我正在尝试写一个“chrome extension”插件,当我尝试执行这个插件时,它不起作用,但没有显示任何错误。已经尝试过了。但是不起作用!!我将提供一个完整的代码示例。让我来看看这个。实际上我正在尝试写一个“chrome extension”插件,当我尝试执行这个插件时,它是不工作,但没有显示任何错误。