如何用JavaScript替换标签html表中的样式以导出到CSV文件

Question

I try to replace all tags in the HTML table but when I try, it can't replace them because it has a style attribute in the <span> tag. Here is my HTML and JavaScript code.

 function doCsv(){ var table = document.getElementById("myTable").innerHTML; var data = table.replace(/<thead>/g, '') .replace(/<\\/thead>/g, '') .replace(/<tbody>/g, '') .replace(/<\\/tbody>/g, '') .replace(/<tr>/g, '') .replace(/<\\/tr>/g, '\\r\\n') .replace(/<th>/g, '') .replace(/<\\/th>/g, ',') .replace(/<td>/g, '') .replace(/<\\/td>/g, ',') .replace(/<span>/g, '', '""') .replace(/<\\/span>/g, '', '""'); alert(data); } 

 <table width="100%" id="myTable" style="text-align: left;"> <tr> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> </tr> <tr> <td>2016-11-21 09:45:32</td> <td>test test</td> <td>test</td> <td>2016-11-21 - 2016-11-21 (1)</td> <td><span style="color:green">test</span></td> </tr> </table> 

Answer 1

use .innerText instead of innerHTML to return just the text contents.

You can also use querySelectorAll("<any css code>") to narrow down your search.

In the example below, I have used two CSS tags: tr>th and tr>td which basically means

"any TH element that is a descendant of a TR element"

and

"any TD element that is a descendant of a TR element"

Combined with querySelectorAll() which returns an array of elements that I can then access using simple array methods like for loops

UPDATE

I updated the example so that it would generate a proper CSV file (more or less) by adding a nested querySelectorAll() function call to each TR element.

 function doCsv() { var _data = ""; var table = document.querySelectorAll("tr"); for (var i = 0; i < table.length; i++) { // each TR is stored in table[i] var entry = table[i]; // all TD and TH elements for that TR are stored in entry_children var entry_children = entry.querySelectorAll("td,th"); for (var u = 0; u < entry_children.length; u++) { _data += entry_children[u].innerText + ","; } // add return at end of last child TR/TH element _data += "\\r\\n"; } alert(_data); } doCsv(); 

 <table width="100%" id="myTable" style="text-align: left;"> <tr> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> </tr> <tr> <td>2016-11-21 09:45:32</td> <td>test test</td> <td>test</td> <td>2016-11-21 - 2016-11-21 (1)</td> <td><span style="color:green">test</span> </td> </tr> </table>