更换节点的顶级文本不破坏孩子

的格式。如果我有以下的html代码：更换节点的顶级文本不破坏孩子

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

而且我想改变“富”到“巴兹”，我可以做到以下几点：

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

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

你怎么能做到这一点？

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

来源

2011-09-30 Tyilo

您无法重复使用与您在jsfiddle演示中一样的'ID'属性。 –

@Jared：我想你错过了这一点。第二行应该保持红色。 –

@Felix - 是的，我确实错过了（但我说得对，OP只关心Chrome）。 –

你可以在孩子迭代，并只修改文本节点：

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

来源

2011-09-30 15:10:33

虽然@Felix克林的解决方案是最好的方法，在你的特殊情况，你可以使用.innerHTML代替.innerText。

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

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

来源

2011-09-30 15:13:41 kapa

由于您使用的是innerText（它将返回带有所有HTML的内容），所以您正在失去格式。只需使用innerHTML：http://jsfiddle.net/cLzJD/4/（我也改变了id为唯一）。

来源

2011-09-30 15:17:38 deviousdodo

更换节点的顶级文本不破坏孩子

回答

相关问题