CODEWITHSUNDEEP
javascriptregex
bobbyrne01
bobbyrne01

Reputation: 6743

Parsing data from js variable containing html

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?

Upvotes: 0

Views: 2014

Answers (2)

ndugger
ndugger

Reputation: 7531

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');

Upvotes: 2

Phil
Phil

Reputation: 164912

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);
});

Upvotes: 0

Related Questions