当 DIV 具有使用 jQuery 的文本的子元素时，如何仅从 DIV 获取文本？答案

【问题标题】：How to get text only from the DIV when it has child elements with text using jQuery?当 DIV 具有使用 jQuery 的文本的子元素时，如何仅从 DIV 获取文本？
【发布时间】：2011-08-15 17:41:51
【问题描述】：

当父DIV有带有文本的子元素时，如何使用jQuery从父DIV获取文本？

<div id='div_1'>
  I am a DIV
  <span>
    I am a SPAN
  </span> 
</div>

如果我要使用 $('#div_1').text()，它会给我“我是一个 DIV 我是一个 SPAN”。我如何只得到文本“我是来自 div_1 的 DIV” ?非常感谢任何帮助，谢谢。

【问题讨论】：

这似乎与 stackoverflow.com/questions/3464647/… 重复
@Silent-Penguin 这肯定是正确的做法。

标签： jquery

【解决方案1】：

尝试：

$('#div_1').clone().children().remove().end().text();

【讨论】：

【解决方案2】：

您可以直接访问您要查找的文本节点。在您的情况下，请使用以下内容：

 $('#div_1')[0].childNodes[0].nodeValue

每个节点都有一个子节点列表，它可能是其他 HTML 元素或文本节点。因此，我们得到第一个孩子（在你的情况下是一个文本节点）并返回 nodeValue 这将是文本本身。这是example。

【讨论】：

我认为这是最好最快的选择

【解决方案3】：

<div id='div_1'> 
  I am a DIV 
  <span> 
    I am a SPAN 
  </span>  
</div> 
<script> 
$(function(){ 
    $("#div_1").contents().filter('*').remove(); 
}); 
</script>

http://sandbox.phpcode.eu/g/c4fb9.php

【讨论】：

如果div中还有其他元素，可以使用filter('*')代替。
@JamWaffles：好吧，抱歉我错过了他的“唯一”

【解决方案4】：

您可以使用.remove() 去除div 中的HTML 元素。 Here's a JSFiddle.

以及与之配套的代码：

HTML

<div id='div_1'>
  I am a DIV
  <span>
    I am a SPAN
  </span> 
</div>

<div id="output"></div>

JavaScript

$(document).ready(function() {
    var div = $("div#div_1").clone();
    
    div.find("*").remove();
    
    $("div#output").text(div.text());
});

我已经使它比它需要的复杂一点（使用.clone()），所以div 的原始内容被保留了。如果你只是想获取文本而不关心原始内容，可以将.clone() 留出。

【讨论】：

虽然很容易实现，但为什么这么难？
@genesis 不错的解决方案。我忘了过滤器。
尽管它可能很垃圾，但它仍然有效，所以我将保留它。但是，感谢您的提示-这个问题也教会了我一些东西；-P