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

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属性构建仅文本nodes()的文本内容的集合.

完成后,它使用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('');

这是一个显示差异的性能测试.