获取元素jquery中的第一行文本

Posted

技术标签:

【中文标题】获取元素jquery中的第一行文本【英文标题】:getting the first line of text in an element jquery 【发布时间】:2011-11-14 21:52:49 【问题描述】:

我有一个这样的示例元素:

<div id="element">
  Blah blah blah.
  <div>Header</div>
  ...
</div>

它也可以是这样的:

<div id="element">
  <span>Blah blah blah.</span>
  <h4>Header</h4>
  ...
</div>

我想获取元素内文本的第一行(松散地定义行)(Blah blah blah.)。它可能被包裹在子元素中,或者只是裸文本节点。我怎么做?谢谢。

【问题讨论】:

【参考方案1】:

使用contents()[docs] 方法获取所有子节点,包括文本节点,过滤掉任何空(或仅空白)节点,然后获取集合中的第一个。

var first_line = $("#element")
                       .contents()
                       .filter(function()  
                           return !!$.trim( this.innerhtml || this.data ); 
                       )
                       .first();

文本节点: http://jsfiddle.net/Yftnh/

元素: http://jsfiddle.net/Yftnh/1/

【讨论】:

您好,您能解释一下为什么要退货吗!!?什么是!!? 它转换为值的布尔等效值。修剪后,如果.innerHTML.data 返回一个空字符串,!! 会将其转换为布尔值false,因为空字符串被认为是“假”值。任何非空字符串都将生成true。 ***.com/questions/4686583/… +1 来自我,但性能谨慎的人可能想要考虑使用 $.each() 而不是 filter()。这对我来说有点晚了,但是jsfiddle.net/AndyE/Yftnh/3 就是一个例子(忽略修订版 2,我在这里半睡半醒!) @Andy E:不错。也很好地使用了逗号运算符。 @Harry:它只是让您在找到非空节点后停止循环。对于.filter(),您必须让循环为.contents() 返回的每个元素运行。 @Andy E:为了好玩,这里有一个没有逗号的return !$.trim((first_line = this).innerHTML||this.data); :)【参考方案2】:

这是给你的想法。当然,如果你想要获取的行之前有 h4 元素:

var content = $('#element').html();
var arr = content.split('<h4>');
console.log(arr[0]);

【讨论】:

【参考方案3】:
var myElement = $("#element");
while(myElement.children().length > 0)

   myElement = myElement.children().first();

var firstText = myElement.text();

当然,假设文本被正确地包裹在一个元素中。您可以检查第一个元素之前是否有文本:

/\s*</.test(myElement.html())

【讨论】:

不适用于我认为的第一种情况,这将匹配标题而不是等等等等(也许应该选择更好的示例文本哈哈) 如果你得到 mytext,它会变得非常困难。我猜你需要递归遍历 DOM 的东西。它必须有多防弹?【参考方案4】:

先获取元素的内容

var content = $('#element').html();

然后使用换行符将文本拆分成一个数组

tmp = content.split("\n");

数组的第一部分是元素的第一行

var firstLine = tmp[0];

【讨论】:

我首先想到的是,什么换行符,但我在 Fx 中看到至少有。然而,依赖它是危险的。这是第一行:alert($("#element").text().split(/\n/)[1]) [0]th 是一个空字符串...jsfiddle.net/mplungjan/QquSp【参考方案5】:

计数器从 1 开始

myElement.text().split('\n')[1]

【讨论】:

以上是关于获取元素jquery中的第一行文本的主要内容,如果未能解决你的问题,请参考以下文章

jquery 怎样获取某元素以下的第n个元素

处理元素(jQuery)

jQuery.获取更新元素文本text()

jquery获取元素值的方法(常见的表单元素)

jQuery 获取和设置HTML元素

jquery如何获取父元素的子元素