How to store chunk of html markup into an array?

Question

I am trying to extract a user input html data and store them in an object or array

The source of html could be as following

begin <em>texts</em>
    description texts here

<table>
   <tr><td>cell 1<td><td>cell2</td></tr>
   <tr><td>cell 3<td><td>cel4</td></tr>
</table>

<em>second<em> part texts

<table>
   <tr><td>cell 5<td><td>cell6</td></tr>
   <tr><td>cell 7<td><td>cel8</td></tr>
</table>

I need to be able to store the following things.

all the texts outside of table and the cell data in table. they need to be in order.

I have tried

var data = [];
sourceHtml.contents().each(function(){
    if($(this).is('table')){
          var table = $(this)
          var rows = 'rows:' + $('tr', table).length;
          var column ='column:' + $('td', table).length / $('tr', table).length;
          //i need to get the table columns and rows counts
          data.push(rows)
          data.push(column)

          table.find('td').each(function(){
              data.push($(this).text().trim());
          })
        }else{
          data.push($(this).text().trim());
        }
 })

The above will only give me all the texts in the sourceHtml but lose all the markup for my texts. Are there anyway to maintain the html markup while getting texts of my data? Thanks so much for the help!

do you have only 1 table?

Atif
– Atif

2013-07-19 20:08:39 +00:00
Commented Jul 19, 2013 at 20:08 — Atif
– Atif, Commented Jul 19, 2013 at 20:08
Instead of using .text() use .html()

Cᴏʀʏ
– Cᴏʀʏ

2013-07-19 20:08:49 +00:00
Commented Jul 19, 2013 at 20:08 — Cᴏʀʏ
– Cᴏʀʏ, Commented Jul 19, 2013 at 20:08

Mangiucugna · Accepted Answer · 2013-07-19 20:09:40Z

1

Instead of $(this).text().trim() use $(this).html()

Hope this helps

answered Jul 19, 2013 at 20:09

Mangiucugna

1,7621 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ennui · Accepted Answer · 2013-07-19 20:10:02Z

1

Use .html() instead of .text() to get an element's HTML markup content instead of text node content.

http://api.jquery.com/html/

answered Jul 19, 2013 at 20:10

Ennui

10.2k3 gold badges37 silver badges42 bronze badges

1 Comment

FlyingCat Over a year ago

thanks, but for some reasons, all the texts return null when I change }else{ data.push($(this).html().trim()); } +1

Collectives™ on Stack Overflow

How to store chunk of html markup into an array?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related