jquery – 在元素中获取文本,不包括提取物

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

有没有办法只得到直接在元素内的文本？

例如.

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

从那里我想要得到只是这里是文本.

解决方法

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

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

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

之后,它使用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显示差异.