從包含html的js變量解析數據

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