jquery - 获取元素内的文本(不包括后代)

Question

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

有没有办法只获取直接位于元素内的文本？

例如。

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

从中我只想得到这是文本。

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] 从集合中创建一个数组。方法，最后使用 .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显示差异。