在元素中获取文本(不包括后代) [英] Getting text within element excluding decendants

问题描述

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

有没有办法只获取直接在元素内的文本?

例如

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

从那我只想得到Here is text.

解决方案

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] 方法，最后使用 .join() ^[docs] .

当然，您的选择器应特定于您要定位的<div>.

---

编辑:如果您希望对单词之间的空格进行标准化，则可以使用 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

---

使用 jQuery.map() ^{[docs ]} 方法，用于更通用的用途.

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

这是一项性能测试，显示了差异.

I see that jQuery has the .text() function for getting all text within an element and its descendant elements.

Is there a way to only get the text that is directly within the element?

eg.

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

From that I would want to get just Here is text.

解决方案

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

Example: http://jsfiddle.net/PeXue/

This uses the contents()^[docs] method to get all children of the div, including text nodes, then the map()^[docs] method to build a collection of the text contents of only the text nodes (this.nodeType === 3) using their .data property.

After that is done, it makes an Array from the collection using the get()^[docs] method, and finally joins the result using .join()^[docs].

Of course your selector should be specific to the <div> you're targeting.

---

EDIT: If you want to normalize the spaces between the words a bit, you can trim the leading and trailing white space from the content of each text node using the jQuery.trim()^[docs] method, then give .join() a single space to join each set.

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

alert( result );

Example: http://jsfiddle.net/PeXue/1

We could even shorten it a bit, and ensure that any empty text nodes are excluded at the same time:

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

alert( result );

Example: http://jsfiddle.net/PeXue/2

---

EDIT 2:

You can get an enormous performance increase by using the jQuery.map()^[docs] method, which is meant for more generic use.

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

Here's a performance test showing the difference.

这篇关于在元素中获取文本(不包括后代)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！