如何從HTML中提取屬性和文本？

-4

<li class="speaker_index js_only" id="si_4178514" 
    data-si_id="4178514" data-speaker_id="20864" 
    data-start_offset="9" 
    data-end_offset="125"> 
    <h5> 
     <span class="icon-user">speaker: </span>James Brown 
     <span class="item_time"><span class="icon-time" title="time">, time: </span>00:01:56</span> 
    </h5> 
    <p>The chairman opens the meeting</p> 
</li>

我會處理這種數據檢索下面

start=9 
end=125 
speaker=James Brown 
text=The chairman opens the meeting

我可以尋找各種符號和提取我需要的數據結果，但我想這可以做很多結構化和一般的方式（可能通過使用正則表達式？）。
最好的辦法是創建一個對象數組（每個對象都有鍵start,end,speaker,text）。

什麼是使用JavaScript實現我的目標的最好和最簡單的方法？

來源

2014-09-06 SoftwareTester

不要使用正則表達式。請使用DOM。 – 2014-09-06 18:36:39

如果它總是格式良好的html，你可以嘗試將它轉換爲xml並對其進行xpath搜索。 – Rhumborl 2014-09-06 18:36:48

如果你的數據是有效的XML，它似乎是，那麼你可以做一個簡單的XSLT轉換，如：

<xsl:template match="li"> 
    start=<xsl:value-of select="@data-start_offset"/> 
    end=<xsl:value-of select="@data-end_offset"/> 
    <xsl:apply-templates/> 
</xsl:template> 

<xsl:template match="p"> 
    text=<xsl:value-of select="."/> 
</xsl:template>

如果你不希望涉足與XSLT，然後按照@Rhumbor我的建議是，你可以將HTML加載到瀏覽器中，這是所有最好的HTML解析器之一，然後通過以下方式訪問你想要的東西（除非你是一個受虐狂，否則不需要jQuery）支持古老的瀏覽器）：

start = document.querySelect('li').getAttribute('data-start_offset');

或者如果你喜歡

start = document.querySelect('li').dataset.start_offset

等。或者，你可以使用XPath，他提到：

start = document.evaluate('//li/@data-start_offset', ...);

你可以直接編寫一個簡單的JS程序和模擬瀏覽器下運行它，如PhantomJS，並輸出所期望的結果到控制檯，如

console.log("start=", start);

，並運行它

phantomjs extract_data.js input.js > output

來源

2014-09-06 18:51:23

感謝您解釋各種可能性。 – SoftwareTester 2014-09-07 13:00:23

正如你使用JavaScript，你可以使用jQuery來做到這一點。

例爲獲得初始值（注意，代替選擇，你也可以通過包含HTML的字符串）：

var $data = $("#data"); 
var $li = $("li", $data); 
var startOffset = $li.attr("data-start_offset"); 

alert("start: " + startOffset);

http://jsfiddle.net/j8drarha/5/

來源

2014-09-06 18:49:03 Matthias

（1）他沒有說他正在使用JavaScript。（2）說，因爲你正在使用JavaScript，你可以使用jQuery，是一個非sequitur。 – 2014-09-06 18:58:09

「用JavaScript實現我的目標的最好和最簡單的方法是什麼？」是OP問題的最後一行，並且JavaScript標記也存在。 – Matthias 2014-09-06 19:08:12

哎呀，對不起。然而，我的評論中的「非sequitur」部分。 – 2014-09-06 19:14:17

如何從HTML中提取屬性和文本？

回答

相關問題