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

前端之家收集整理的这篇文章主要介绍了jquery – 在元素中获取文本,不包括提取物前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到jQuery具有.text()函数,用于获取元素及其后代元素中的所有文本.

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

例如.

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

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

解决方法

@H_404_6@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()一个空格来连接每个集合.

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

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

我们甚至可以缩短一点,并确保同时排除任何空文本节点:

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

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

编辑2:

您可以通过使用jQuery.map()[docs]方法获得巨大的性能提升,这意味着更通用的方法.

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

Here’s a performance test显示差异.

原文链接:https://www.f2er.com/jquery/176341.html

猜你在找的jQuery相关文章