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

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也可以。

Answer 2

虽然@Felix Kling的解决方案是最好的方法，但在您的特殊情况下，您可以使用.innerHTML而不是.innerText 。

element.innerHtml = element.innerHtml.replace('Foo', 'baz');

.replace()只会替换第一次出现，因此如果您确定文本前没有HTML内容，则可以使用它。 否则可能会破坏您的HTML。

Answer 3

您正在丢失格式，因为您正在使用innerText（它将返回删除了所有HTML的内容）。 只需使用innerHTML： http ： //jsfiddle.net/cLzJD/4/ （我也将id更改为唯一的）。