如何从HTML中提取属性和文本

How to extract attributes and text from HTML?

本文关键字：属性 文本 提取 HTML      更新时间：2023-09-26

我有包含等数据的数据文件

<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

我可以查找各种符号并提取我需要的数据，但我认为这可以通过结构化和通用的方式完成（也许可以使用regex？）
最好是创建一个对象数组（每个对象都有关键字start、end、speaker、text）。

使用JavaScript实现目标的最佳和最简单的方法是什么？

在使用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/

如果您的数据是有效的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，那么按照@Rhumborl的建议，你可以将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
相关文章：