用HTML内容替换ChildNode值
洛克尼
我试图用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]);
}
}
}
扎卡里亚·阿查尔基（Zakaria Acharki）
您正在使用的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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Grunt用文件内容替换HTML
- 2
用 JavaScript 替换 HTML 页脚内容
- 3
使用preg_replace_callback用新值替换html内容中的特定标签
- 4
使用XSLT 2.0用任意属性的值替换元素的内容
- 5
Javascript：用新值替换数组中的所有内容
- 6
用替代内容（HTML + CSS + JS）替换整个网页
- 7
用新的HTML内容替换单词的每次出现
- 8
bash脚本用其内容替换html中的脚本标签
- 9
jQuery获取HTML值并查找和替换内容中的$或£
- 10
为什么 .html() 不用当前值替换所有内容？
- 11
用jQuery替换DIV的内容
- 12
用XElement替换XElement内容
- 13
用JQuery替换div内容
- 14
用.loc替换值
- 15
用jQuery替换HTML
- 16
如何使用 javascript 或 jquery 用其他内容替换 <button> 元素中的值？
- 17
用html内容过滤
- 18
用HTML消失的内容
- 19
Javascript。替换Div的HTML内容
- 20
当内容溢出浏览器窗口时，用div替换html表布局
- 21
用Django中html文件的内容替换模板的一部分
- 22
IE10：用.html（）替换div内容时，未适当考虑样式
- 23
替换html中的值
- 24
用Powershell替换列值
- 25
Excel用值替换公式
- 26
用sed替换xml值
- 27
用零值替换-inf
- 28
用函数结果替换值
- 29
用函数结果替换值
我来说两句