-2

I have the following html code.

<!DOCTYPE html>
<html>    
    <body>

        <div>
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
        </div>

        <div id="1">
            <p id="2">Paragraph First
                <ol id="3">
                    <li id="4">alice
                        <ul id="31">
                            <li id="41">bob</li>
                            <li id="51">foo</li>
                            <li id="61">grow</li>
                        </ul>
                    </li>
                    <li id="5">coding</li>
                    <li id="6">fun</li>
            </ol>
            </p>
        </div>

        <div>
            <p>Paragraph Second</p>
        </div>


    </body>
</html>

I want to get the text of all the elements to an array(pre order transverse preffered). So for the following example array consists of,

[My First Heading, first paragraph, Paragraph First, alice, bob, foo, grow, coding, fun]

I can use jQuery if it needsHow. can I achieve this ?

My own non-working attempt

var root = document.documentElement; 
recursivePreorder(root); // Recusively find and handle all text nodes 
function recursivePreorder(node) {   
  // If node is a text node   
  if (node.type == 3) {
    //add to the array   
  }   // else recurse for each child node   
  else {     
    for(var i=0; i<node.childNodes.length; i++)       
      recursivePreorder(node.childNodes[i]);   
  }
}

UPDATE

when my tag is <li id="41">bob<a href="url">link text</a>alice</li> it gives me as [bob, link text, alice] . But I want the output as [bob<a href="url">link text</a>alice] means links are working correctly. This is my current solution,

var arr=$('body').find('*').contents().filter(function () { return this.nodeType === 3&&this.textContent.trim()!=""; });

how to solve this problem ?

coding 7891
  • 53
  • 5
  • have you tried something yourself??? – Kartikeya Khosla Dec 03 '14 at 05:54
  • Shortest: http://stackoverflow.com/a/7824394/295783 – mplungjan Dec 03 '14 at 06:00
  • @Kartikeya Yeah. Following is my poor solution. `var root = document.documentElement; recursivePreorder(root); // Recusively find and handle all text nodes function recursivePreorder(node) { // If node is a text node if (node.type == 3) { //add to the array } // else recurse for each child node else { for(var i=0; i – coding 7891 Dec 03 '14 at 06:02
  • This may be useful to loop through the all body elements, and push into an array variable , $(function() { $('body').find('*').each(function() { }); }); – AishwaryaVengadesan Dec 03 '14 at 06:07
  • @mplungjan That works great. But when I ran it in chrome console it gives me some elements named "#text" too. How to avoid it ? – coding 7891 Dec 03 '14 at 06:12
  • They are the CRs. `$('body').find('*').contents().filter(function () { return this.nodeType === 3 && this.textContent.indexOf('\n')!=0; });` – mplungjan Dec 03 '14 at 09:37

2 Answers2

0

You can use map() for that.

$(document).ready(function() {
    var arr = $("#container *").contents().map(function() {
        if (this.nodeType === 3 && this.textContent.trim() != "") {
            return this.textContent.trim();
        }
    });

    console.log(arr);
});

nodeType will be 3 for text contents

Demo

Anoop Joshi P
  • 25,373
  • 8
  • 32
  • 53
0

Try this:

var arr = [];
$(document).find('li,p,h1').each(function(e){
    arr.push(($(this).clone().children().remove().end().text()).trim());
})

Demo

Mangesh Parte
  • 2,179
  • 1
  • 13
  • 16