Question

我看到jQuery具有.text()函数，用于获取元素及其后代元素中的所有文本。

有没有办法只获取直接在元素中的文本？

例如

<div>
Here is <b>some</b> text.
</div>

从那以后我想得到Here is text.

Answer 1

var result = $('div').contents().map(function() {
    if( this.nodeType === 3 ) {
        return this.data;
    }
}).get().join('');

示例： http://jsfiddle.net/PeXue/

这使用contents()^[docs]方法获取div的所有子项，包括文本节点，然后使用map()^[docs]方法构建仅文本节点的文本内容的集合（ this.nodeType === 3）使用他们的.data属性。

完成后，它使用get()^[docs]方法从集合中生成一个Array，最后使用.join()^[docs]加入结果。

当然，您的选择器应该针对您定位的<div>。

编辑：如果要对单词之间的空格进行标准化，可以使用jQuery.trim()^[docs]方法从每个文本节点的内容中修剪前导和尾随空格，然后给.join()一个空格来加入每一组。

var result = $('div').contents().map(function() {
    if( this.nodeType === 3 ) {
        return $.trim( this.data );
    }
}).get().join(' ');

alert( result );

示例： http://jsfiddle.net/PeXue/1

我们甚至可以缩短它，并确保同时排除任何空文本节点：

var result = $('div').contents().map(function() {
    return $.trim( this.data ) || null;
}).get().join(' ');

alert( result );

示例： http://jsfiddle.net/PeXue/2

编辑2：

使用jQuery.map()^[docs]方法可以获得巨大的性能提升，这种方法可以更通用地使用。

var result = $.map( $('div')[0].childNodes, function(val,i) {
  if (val.nodeType === 3) {
    return val.data;
  }
}).join('');

Here's a performance test显示差异。

Answer 2

jsFiddle

的工作示例

var divClone = $('div').clone();    //  WARNING:
divClone.children().remove();       //  This code is much slower than the 
alert(divClone.text());             //  code in the selected answer.

更新

@patrick dw的答案中的性能测试清楚地表明他的方法是更好的选择。我没有删除这个答案，因为我认为对于那些可能不知道哪种方式更好的问题的未来读者是有帮助的。

在元素中获取文本，不包括后代

2 个答案:

更新