Javascript Parse HTML: Get everything inside table tag

Question

If i have the http.responseText stored in a javascript variable e.g named sourcecode which contains the whole source code of the page from which i want to extract everything between the table tags into a javascript variable how do i do that? The html code looks like this:

<table border="0" width="100%" cellspacing="0" cellpadding="0" class="statusbox_ok" style="margin-top: 5px; margin-bottom: 5px">
    <tbody><tr>
        <td align="left" valign="top"><img src="http://www.10eastern.com/images/FoundPhotos/archives/archive118/dasdsa.jpg" style="margin: 2px; margin-right: 10px"></td>
        <td align="left" valign="middle" width="100%">
        Your new username is Tom.   </td>
    </tr>
    </tbody></table>

I want to at least be able to extract:

<td align="left" valign="middle" width="100%">
            Your new username is Tom.   </td>

It doesn't matter if it includes everything between the tbody or whole table tags as well, but that part is crucial to be extracted into a javascript variable. How do i do this without jquery? Thanks.

Can you add an `id` attribute to the table/column? What is your best-case-scenario output (the column, or the table, or all the columns)? Are there other tables in the document that you want to exclude? If so, how do we know which table you want? — Sam, May 06 '14 at 15:25
Here's something to start with: http://regex101.com/r/kB8wA9 — sshashank124, May 06 '14 at 15:25
Slightly improved: http://regex101.com/r/hB2pF9. Hopefully that will set you on the right track — sshashank124, May 06 '14 at 15:26
That's fine, is this the only table? Because right now I'm working on something that will just grab a table's columns, however if there are multiple tables you may get unintended results.. — Sam, May 06 '14 at 15:27
@Sam But can't you use some specific details within that html code which will filter out all the other table tags? — user3466601, May 06 '14 at 15:34
I gave an example answer. I used the table's class to determine which one we wanted. If this isn't specific enough, then I need more criteria as to what is the "right" table (I'm just guessing without seeing the rest and knowing what you want). — Sam, May 06 '14 at 15:35
@sam if the html source code is in a javascript variable named sourcecode, how can i implement that code to work with it? — user3466601, May 06 '14 at 15:41

score 4 · Accepted Answer · edited May 23 '17 at 12:05

Update:

Using this article, I read about DOMParser() which lets you parse a string into a DOM element with Javascript. Using .parseFromString(), I was able to parse an HTML string into a DOM element.

var html = '<html><table /></html>'; // Your source code
html = new DOMParser().parseFromString(html, "text/html");

Just make sure you update document.getElementsByTagName('table') with html.getElementsByTagName('table'), since we are now looking for tables in our parsed string not the document.

Updated JSFiddle.

I avoided using RegEx, because HTML isn't a regular language and you shouldn't use regular expressions to match it. Also, there are enough pure Javascript functions to accomplish your task.

var tables = document.getElementsByTagName('table');
for(var tableIt = 0; tableIt < tables.length; tableIt++) {
    var table = tables[tableIt];
    if(table.className === 'statusbox_ok') {
        var columns = table.getElementsByTagName('td');
        for(columnIt = 0; columnIt < columns.length; columnIt++) {
            var column = columns[columnIt];
            console.log(column.innerHTML);
        }
    }
}

I looped through all of your table elements with .getElementsByTagName(). Then check the .className to make sure it is your statusbox_ok table. We once again use .getElementsByTagName() to loop through all of the columns. You can use some logic here to determine which column you want (similar to what we did with the table's class), but then I logged the HTML contents of each column with .innerHTML.

Check out this JSFiddle for a working example.

Glad I could help, upvote/select my answer when/if you can :) — Sam, May 06 '14 at 15:38
Ah damn, if the html source code is in a javascript variable named sourcecode, how can i implement that code to work with it? — user3466601, May 06 '14 at 15:38
Check out my update @user3466601, I know can take an HTML string and parse it into a DOM element (which then works with the rest of my code. — Sam, May 06 '14 at 15:46

Javascript Parse HTML: Get everything inside table tag

1 Answers1