文本节点怎么设置样式

Question

obj.childNodes
遍历其nodeType=3
然后将想内容里的table设成红色要怎么弄呢？？
node.nodeValue=node.nodeValue.replace(/\btable\b/g,"<span style='color:red'>$1</span>");//这样当然不行，到底怎么弄呢？才能将这个节点里的颜色改变呢？
或者怎么操作其父节点比较方便？

Answer 1

xxxx.innerHTML="<span class='red'>"+xxxx.innerHTML+"</span>";

Answer 2

别个先不说 没有捕获哪来$1?
\b(table)\b

Answer 3

。。原来有捕获的，代码比较多，我直接拿这一点出来，写掉了，
现在的情况是这句
node.nodeValue=node.nodeValue.replace(/\btable\b/g," <span style='color:red'>$1 </span>");//使用后，不会应用样式 ，因为在文本节点里<span会直接显示出来，

Answer 4

var newNode = toElement(node.nodeValue.replace(/\btable\b/ig, '<span style="color:red;">$&</span>'))
node.parentNode.replaceChild(newNode, node);

Answer 5

function toElement(html) {
var span = document.createElement("span");
span.innerHTML = html;
return span;
}

Answer 6

嗯，ls这样可以，不过这样又多添加一个标签了，能不能只在指定位置插入span标签呢？

Answer 7

function toTextNode(str) {
return document.createTextNode(str);
}
function toSpan(str) {
var span = document.createElement("span");
span.style.color = 'red';
span.appendChild(toTextNode(str));
return span;
}var node = .....; // 文本节点
var reg = /\btable\b/ig;var arr = [[node.nodeValue.split(reg), node.nodeValue.match(reg)], [toTextNode, toSpan]];
for (var i=0, len=arr[0][0].length+arr[0][1].length; i<len; i++) {
var newNode = arr[1][i%2](arr[0][i%2].shift());
node.parentNode.insertBefore(newNode, node);
}
node.parentNode.removeChild(node);

Answer 8

试试这种方法：<script>
window.onload = function() {
    var pn = document.getElementById('container').childNodes;
        i=pn.length-1,
        df = document.createElement('span');
    for(; i >= 0; i=i-1) {
        if(pn[i].nodeType === 3) {
            df.innerHTML = pn[i].nodeValue.replace(/(\btable\b)/g," <span style='color:red'>$1 </span>");
            pn[i].parentNode.replaceChild(df, pn[i]);
        }
    }};
</script><p id="container">I am the table, would you like some cup of tea?</p>