替换节点顶层的文本而不破坏子项的格式

Question

如果我有以下HTML代码:

<div id="element">
Qwerty Foo Bar 
<span style="color: red;">This text should/will never be changed by the script.</span>
</div>

我想将"Foo"改为"baz",我可以做以下事情:

var element = document.getElementById('element');
element.innerText = element.innerText.replace('Foo', 'baz');

但是这会破坏红色文本的格式.

你怎么能这样做？

我不需要跨浏览器支持,只支持chrome,我不想使用js框架.jsFiddle:http://jsfiddle.net/cLzJD/3/

Answer 1

您可以遍历子项并仅修改文本节点:

var children = element.childNodes,
    child;

for(var i = children.length; i--; ) {
    child = children[i];
    if(child.nodeType === 3) {
        child.nodeValue = child.nodeValue.replace('Foo', 'baz');
    }
}

DEMO

笔记:

• 如果要替换所有出现的内容Foo,则必须使用正则表达式:replace(/Foo/g, 'baz').

• 这种方法的优点是通过JavaScript绑定的事件处理程序将保持不变.如果你不需要这个,innerHTML也可以.