更換節點的頂級文本不破壞孩子

的格式。如果我有以下的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

更換節點的頂級文本不破壞孩子

回答

相關問題