如何从纯文本中提取HTML标记

Question

I have bunch of html data in plain texts that I got from CKEditor. It contains table structures and bunch of html markup.

I was wondering if there is a way to extract table structure and td data only.

The plain texts could be something like

first table....bunch more texts here...

<table>
   <tr><td>  data1  </td></tr>
   <tr><td>  data2  </td></tr>
   <tr><td>  data3  </td></tr>
</table>

end of table. test data here...

<table>
   <tr><td>  data4  </td></tr>
   <tr><td>  data5  </td></tr>
   <tr><td>  data6  </td></tr>
</table>

end of second table and bunch more texts....

I have tried

//tableData contains everything the user type in CKEditor.
var table = tableData.getElementsByTagName ('table');

but i just realized these texts are no in dom . They are just plain texts I extract from CKEditor .

How do I extract these table data?

Thanks for the help!

Answer 1

I assume that you have a tableData string from which you want to extract DOM nodes to be able to work on them.

To avoid parsing you can insert this string into temporary DOM element.

var temp = document.createElement( 'div' );
div.innerHTML = tableData;

// Retrieve all tables.
var tables = div.getElementsByTagName( 'table' );

Answer 2

You want something like the following which pulls all of the tables into an array and then iterates over them. Here is a fiddle that shows this in action as well http://jsfiddle.net/M5nMY/ . I am assuming here that tabledata is the id of the DOM element containing the tables.

var tableData = document.getElementById('tabledata');
var tables = tableData.getElementsByTagName('table');
var data = new Array();
for(var k = 0; k < tables.length; k++){
   var table = tables[k];
   for(var i=0; i< table.rows.length; i++){
      var row = table.rows[i].cells;
      for(var j=0; j < row.length; j++){
        data.push(row[j].innerHTML);
      }
   }
}

Note in this case, I have pushed all of the data from all of the tables into a single array one row at a time.