Parsing data from js variable containing html

Question

Below is snippet of html that I will be parsing. It is stored inside a js variable.

<tr class='preview'>
    <td class='statistics show' title='Show latest match stats'>
        <button class="js-hide">Show</button>
    </td>

    <td class='match-details'>
        <p>
            <span class='team-home teams'>
                <a href='#'>Leicester</a>
            </span>
            <span class='versus'>
                <abbr title='Versus'> V </abbr> 
            </span>                  
            <span class='team-away teams'>
                <a href='#'>Crystal Palace</a>
            </span>
        </p>
    </td>

    <td class='kickoff'>
        15:00
    </td>
    <td class='status'></td>
</tr>
<tr class='preview'>
    <td class='statistics show' title='Show latest match stats'>
        <button class="js-hide">Show</button>
    </td>

    <td class='match-details'>
        <p>
            <span class='team-home teams'>
                <a href='#'>Liverpool</a>
            </span>
            <span class='versus'>
                <abbr title='Versus'> V </abbr> 
            </span>                  
            <span class='team-away teams'>
                <a href='#'>Spurs</a>
            </span>
        </p>
    </td>

    <td class='kickoff'>
        15:00
    </td>
    <td class='status'></td>
</tr>

Result ..

Leicester vs. Crystal Palace
Liverpool vs. Spurs

I'm interested in the home and away team names. The vs. can be added between each easily.

Could anyone suggest if there is a simple solution for parsing this string? Are RegEx the only approach?

ndugger · Accepted Answer · 2015-10-21 01:00:34Z

3

What you're looking for is DOMParser with its parseFromString method.

Simply pass in your HTML string (and a specified mime-type like 'text/html') into the parser, and you'll get a Document object (or HTMLDocument, to be specific, if you specify the type as 'text/html').

With this Document, you can then query it as usual (whether with querySelector, getElement*, or a library like jQuery).

Here's an example:

var parsedHTML = new DOMParser().parseFromString(myHTMLVariable, 'text/html');
var teams = parsedHTML.querySelectorAll('.teams');

edited Oct 21, 2015 at 1:00

answered Oct 21, 2015 at 0:18

ndugger

7,5815 gold badges35 silver badges42 bronze badges

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

Comments

Phil · Accepted Answer · 2015-10-21 00:18:52Z

0

You can insert the HTML string into a temporary element and query it using DOM methods. For example

// HTML in "html" variable

var tmp = document.createElement('div');
tmp.innerHTML = html;

var homeTeams = tmp.querySelectorAll('.team-home');
Array.prototype.forEach.call(homeTeams, function(team) {
    console.log(team.textContent);
});

answered Oct 21, 2015 at 0:18

Phil

166k25 gold badges265 silver badges269 bronze badges

Collectives™ on Stack Overflow

Parsing data from js variable containing html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related