javascript - 替换元素内的文本

Question

我需要替换任意元素内的部分文本。我对元素的结构一无所知，包括它可能具有的任何子元素，但我必须假设可能存在带有附加绑定(bind)的子元素。一个例子可能是:

<div id="checkit">
  Lorem ipsum textum checkum.
  <input type="button" id="clickit" value="Click Me" />
</div>

现在，如果我想用其他东西替换“ipsum”，我可以用 innerHTML 抓取#checkit 的内容，在其上运行替换，然后用新文本设置它的 innerHTML，但是如果已经设置了绑定(bind)#clickit，更新innerHTML时绑定(bind)会丢失。

我真的不需要或不想替换元素的整个 innerHTML，但我不确定如何替换元素中的部分文本。

所以我的问题是双重的:

1. 关于如何替换#checkit 中的部分文本的建议
2. 关于如何在不丢失绑定(bind)的情况下替换 innerHTML 的建议(或者在 #checkit 中保存绑定(bind)并在替换 innerHTML 后重新应用它们的方法)？

Answer 1

Suggestion on how to replace a portion of text within #checkit

您可以使用这种方式只替换文本内容而不会影响其中的任何元素。

$('#checkit').contents().each(function(){
    if(this.nodeType===3) //select only the text nodes
    {
      this.nodeValue = this.nodeValue.replace(/u/g,'Z'); //replace all u with z
    }
});

Demo

Suggestion on how to replace innerHTML without losing bindings (or a way to save bindings inside #checkit and reapply them after replacing innerHTML)?

如果您想替换 innerHTML 并保持绑定(bind)不变，您可以再次绑定(bind)事件或使用 jquery 中的 .on() 使用事件委托(delegate)。因此该事件将附加到 DOM 中现在和 future 的元素，与选择器匹配，而无需再次绑定(bind)它们。

参见 documentation