Question

我需要替换任意元素中的部分文本。我不会对元素的结构有任何了解，包括它可能具有的任何子元素，但我必须假设可能存在带有附加绑定的子元素。一个例子可能是：

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

现在，如果我想用其他东西替换'ipsum'，我可以使用innerHTML获取#checkit的内容，在其上运行replace，然后使用新文本设置其innerHTML，但是如果已经设置了绑定#clickit，更新innerHTML时绑定将丢失。

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

所以我的问题有两个：

建议如何在#checkit
建议如何在不丢失绑定的情况下替换innerHTML（或者在#checkit中保存绑定并在替换innerHTML后重新应用它们的方法）？

Answer 1

建议如何替换#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

建议如何在不丢失绑定的情况下替换innerHTML（或者在#checkit中保存绑定并在替换innerHTML后重新应用它们的方法）？

如果要替换innerHTML并保持绑定完整，可以再次绑定事件或在jquery中使用.on()使用事件委派。这样事件就会附加到DOM现在以及将来的元素中，与选择器匹配，而不必再次绑定它们。

请参阅documentation

Answer 2

解决问题的最佳方法是在另一个元素中添加文本，并使用Jquery的prev（）方法查找前一个元素....

您可以查看链接：

http://api.jquery.com/prev

HTML CODE：

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

JQUERY CODE：

$ = jQuery.noConflict();
$("#checkit").delegate('#clickit' , 'click' , function(){
   $(this).prev().html('your text here..');
});

代码也是在jsfiddle上创建的：

http://jsfiddle.net/paragkuhikar/VxJBD/

请检查......

替换元素内的文本

2 个答案:

Demo