Question

以下是我要解析的html片段。它存储在js变量中。

<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>

结果..

Leicester vs. Crystal Palace
Liverpool vs. Spurs

我对home和away团队名称感兴趣。可以轻松地在每个之间添加vs.。

有人建议是否有解析此string的简单解决方案？ RegEx是唯一的方法吗？

Answer 1

您正在寻找的是DOMParser及其parseFromString方法。

只需将HTML字符串（以及指定的mime类型，如'text/html'）传入解析器，即可获得Document个对象（或HTMLDocument，具体而言，如果您将类型指定为'text/html'）。

使用此Document，您可以照常查询（无论是querySelector，getElement*还是像jQuery这样的库。）

以下是一个例子：

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

Answer 2

您可以将HTML字符串插入临时元素并使用DOM方法进行查询。例如

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

从包含html的js变量解析数据

2 个答案: