javascript - getting the first line of text in an element jquery

Question

I have an example element like this:

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

it can also look like this:

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

I want to get the first line (defining line loosely) (Blah blah blah.) of text inside the element. It might be wrapped inside a child element or just be naked textnode. How do I do that? Thanks.

Answer 1

Use the contents()^[docs] method to get all children, including text nodes, filter out any empty (or whitespace only) nodes, then grab the first of the set.

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

text node: http://jsfiddle.net/Yftnh/

element: http://jsfiddle.net/Yftnh/1/