Question

如果我有以下HTML代码：

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

我想改变＆＃34; Foo＆＃34;到＆＃34; baz＆＃34;，我可以做到以下几点：

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更改为唯一的。）

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

3 个答案: