仅选择元素的文本（而不是其子/后代的文本）答案

【问题标题】：Select only text of an element (not the text of its children/descendants)仅选择元素的文本（而不是其子/后代的文本）
【发布时间】：2011-11-23 02:43:41
【问题描述】：

请考虑以下 HTML：

<td>
  Some Text
  <table>.....</table>
</td>

我需要操作 td 元素的“一些文本”文本。我不应该触摸这个td 中的表格元素。

所以，举例来说，也许我想用“@”替换所有“e”。我用 jQuery 的 .text() 和 .html() 尝试了一些方法。我似乎总是从子表中选择一些我不应该触摸的东西。此外，不幸的是，我无法将“某些文本”包装到跨度或 div 中。

【问题讨论】：

我不知道为什么卡里姆删除了他的答案，所以我把它放在评论中。 $('#myCell')[0].firstChild.data = $('#x')[0].firstChild.data.replace('e', '@'); 有什么问题。我唯一能看到的是它可能不会包含所有文本对象。

标签： javascript jquery html

【解决方案1】：

$(function(){
  $('td').contents().each(function(){
     if(this.nodeType === 3)
      $(this).replaceWith(this.wholeText.replace(/e/g, '#'));
  });
});

或者像你建议的那样

$('td').contents().each(function(){
  if(this.nodeType === 3)
     this.data = this.wholeText.replace(/e/g, '#');
 });

.contents() 提供所有元素，包括textNodes。

【讨论】：

谢谢你，杰安迪。我无法将文本设置为新值。 .text('new value') 什么都不做。
@dimskiy：确实，.replaceWith() 的表现也不错。
我很难在两种解决方案之间做出选择。为 .replaceWith() 选择你的。实际上，我遇到某些情况需要用 html 元素替换某些字符，而 .replaceWith() 可以解决问题。谢谢！

【解决方案2】：

如果你想为 td 中的每个段文本做一些事情，你可以用循环遍历它们：

var nodes=tdEl.childNodes;
for(var i=0; i<nodes.length; ++i){
  if(nodes[i].nodeType===3){  // 3 means "text"
    nodes[i].data = nodes[i].wholeText.replace(/e/g, '@');
  }
}

我是否正确理解了您要查找的内容？

如果您已经为其他内容加载了 jQuery，您可以使用 jQuery，但我不会为上面的一小段代码加载 24kb 库。

【讨论】：

谢谢你，Lucideer。我在那个项目中已经有 jQuery，所以 jQuery 解决方案也很好。我无法使用 .wholeText 设置文本。我得到错误：设置一个只有 getter 的属性
更新：nodes[i].data 会将 html 标签呈现为文本。
抱歉那个dimskiy - 你是对的，我的回复关于设置wholeText不正确 - 已编辑。您不能将 HTMLElements 放入 textNode，但可以删除 textNode 并将其替换为 HTMLElement（或其中的一系列）。