How to extract texts from html markup

Question

I try to get all the texts in my html data that the user enters

I have html as below

  <em>first part</em> of texts here <table> ...... ...... </table> <em>second part</em> of texts 

I am using jquery

 project =[]; $(htmlData).contents().each(function(){ if($(this).is('table')){ //do something with table }else{ if(this.nodeType === 3) { // Will only select element nodes project.push($(this).text()); }else if(this.nodeType === 1){ project.push(this.outerHTML); } } } 

array ends as

 array(0=>'<em>first part</em>', 2=>'of texts here',3=>'<em>second part</em>',4=>'of texts') 

I was hoping to get an array similar to the following

 array(0=>'<em>first part</em>of texts here',1=>'<em>second part</em>of texts'); 

How to do it? Thanks for the help!

Answer 1

DEMO : http://jsfiddle.net/Cbey9/2/

 var project =[]; $('#htmlData').contents().each(function(){ if($(this).is('table')){ //do something with table }else{ var txt = ( this.nodeType === 3 ? $(this).text() : (this.nodeType === 1 ? this.outerHTML : '') ).replace(/\s+/g,' ') // Collapse whitespaces .replace(/^\s/,'') // Remove whitespace at the beginning .replace(/\s$/,''); // Remove whitespace at the end if(txt !== ''){ // Ignore empty project.push(txt); } } }); 

---

I misunderstood your problem. If you want to table, you can use

 var project =['']; $('#htmlData').contents().each(function(){ if($(this).is('table')){ project.push(''); //do something with table }else{ project[project.length-1] += ( this.nodeType === 3 ? $(this).text() : (this.nodeType === 1 ? this.outerHTML : '') ); } }); for(var i=0; i<project.length; ++i){ project[i] = project[i].replace(/\s+/g,' ') // Collapse whitespaces .replace(/^\s/,'') // Remove whitespace at the beginning .replace(/\s$/,''); // Remove whitespace at the end } 

DEMO : http://jsfiddle.net/Cbey9/3/

Answer 2

Place the texts you want inside spaces with a specific class (do not change the layout):

 <span class="phrase"><em>first part</em> of texts here</span> <table> ...... ...... </table> <span class="phrase"><em>second part</em> of texts</span> 

And then you can get them:

 $('span.phrase').each(function() { project.push($(this).html()); });