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

【问题标题】：getting the first line of text in an element jquery获取元素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.）。它可能被包裹在子元素中，或者只是裸文本节点。我怎么做？谢谢。

【问题讨论】：

标签： javascript jquery html

【解决方案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。 stackoverflow.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]

【讨论】：