使用 GetElementsByClass 按类名查找嵌套在 <p> 元素中的所有 <div> 元素

Use GetElementsByClass to find all <div> elements by class name, nested inside a <p> element

提问人:RagAnt 提问时间:10/25/2022 最后编辑:Janez KuharRagAnt 更新时间:11/16/2022 访问量:171

问:

我正在使用 Kotlin 中的 Jsoup 创建一个解析器

我需要获取一个标签的内部文本,该标签的类为“ptrack-content”,类为“titleCard-synopsis”

当我尝试在由以前的 getElementsByClass 创建的元素对象中获取 ElementsByClass 时,我得到 0 个元素

法典:

class NetlifxHtmlParser {

    val html = """
         <div class="titleCardList--metadataWrapper">
            <div class="titleCardList-title"><span class="titleCard-title_text">Map Her</span><span><span class="duration ellipsized">50m</span></span></div>

            <p class="titleCard-synopsis previewModal--small-text">
            <div class="ptrack-content">A hidden map rocks Hartley High as the students' sexcapades are publicly exposed. Caught as the culprit, Amerie becomes an instant social pariah.</div>
            </p>

         </div>
         
          <div class="titleCardList--metadataWrapper">
             <div class="titleCardList-title"><span class="titleCard-title_text">Renaissance Titties</span><span><span class="duration ellipsized">50m</span></span></div>
             <p class="titleCard-synopsis previewModal--small-text">
             <div class="ptrack-content">Amerie, the new outcast, receives a party invitation that gives her butterflies. But when she manages to show up, a bitter surprise awaits.</div>
             </p>
          </div>
    """.trimIndent()

    fun parseEpisode() {
        val doc = Jsoup.parseBodyFragment(html)
        val titleCards = doc.getElementsByClass("titleCard-synopsis")
        println("Episode: count titleCard = > ${titleCards.count()}") // 2

        titleCards.forEachIndexed { index, element ->
            val ptrack = element.getElementsByClass("ptrack-content")
            println("Episode: count ptrack = > ${ptrack.count()}") // 0 !!
            println("inner html = > ${ptrack.html()}") // null string !!

        }

    }
}

在上面的代码中,

首先,我正在提取带有类名的标签。titleCard-synopsis

为此,我使用 which 返回 2 个元素项。doc.getElementsByClass("titleCard-synopsis")

然后,在元素列表中,我通过在每个元素中使用相同的 getElementsByClass 来提取具有 Class 的元素,titleCardptrack-content

它返回空列表。

为什么会这样?

我的目标是,我需要提取每个标题的描述文本,存储在 p 标签的内部标签中,类为 titleCard-synopsis。

如果我尝试直接从“ptrack-content”获取,它可以正常工作,但这是在主 HTML 源代码中许多地方使用的通用类。(这是片段)

我需要获取一个标签的内部文本,该标签的类为“ptrack-content”,类为“titleCard-synopsis”

但是在代码中的上述方法中,我只得到了 emtpy 列表。

为什么?

另请注意,如果我在 () 的元素对象中调用该方法, 我没有收到内部 DIV 标签,一个空字符串!!HTML()titleCardsptrack.html()

请指导我解决问题!

Kotlin jsoup HTML 解析

评论


答:

2赞 Janez Kuhar 11/1/2022 #1

TL的;博士

我需要获取一个标签的内部文本,该标签的类为“ptrack-content”,类为“titleCard-synopsis”

我不太熟悉 Kotlin,但这应该会产生所需的输出:

val doc = Jsoup.parseBodyFragment(html)
val result = doc.select(".titleCard-synopsis + .ptrack-content")

result.forEachIndexed {index, element -> 
    println("${element.html()}")
}

现场示例


这是一个有趣的问题!

你基本上有一个无效的HTML,而jsoup足够聪明,可以自动更正它。您的 HTML 结构被更改,突然您的查询不起作用。

这是错误:

<p class="titleCard-synopsis previewModal--small-text">
  <div class="ptrack-content">A hidden map rocks Hartley High as the students' sexcapades are publicly exposed. Caught as the culprit, Amerie becomes an instant social pariah.</div>
</p>

你不能像这样将元素嵌套在元素中。<div><p>

段落是块级元素,特别是如果在结束 </p> 标记之前解析另一个块级元素,则会自动关闭[来源:<p>:段落元素]

另外,看看 <p> 标签中的嵌套块级元素......对还是错?

这是 jsoup 解析树的方式:

<html>
 <head></head>
 <body>
  <div class="titleCardList--metadataWrapper">
   <div class="titleCardList-title">
    <span class="titleCard-title_text">Map Her</span><span><span class="duration ellipsized">50m</span></span>
   </div>
   <p class="titleCard-synopsis previewModal--small-text"></p>
   <div class="ptrack-content">
    A hidden map rocks Hartley High as the students' sexcapades are publicly exposed. Caught as the culprit, Amerie becomes an instant social pariah.
   </div>
   <p></p>
  </div>
  <div class="titleCardList--metadataWrapper">
   <div class="titleCardList-title">
    <span class="titleCard-title_text">Renaissance Titties</span><span><span class="duration ellipsized">50m</span></span>
   </div>
   <p class="titleCard-synopsis previewModal--small-text"></p>
   <div class="ptrack-content">
    Amerie, the new outcast, receives a party invitation that gives her butterflies. But when she manages to show up, a bitter surprise awaits.
   </div>
   <p></p>
  </div>
 </body>
</html>

正如你所看到的,有类的元素没有类的子项。titleCard-synopsisptrack-content

评论

0赞 RagAnt 11/1/2022
噢。HTML 格式错误。我通过 Inspect Element 从 Netflix 网站复制了它。
0赞 RagAnt 11/1/2022
因此,即使是 Netflix 也有格式错误的 HTML ??????
1赞 Janez Kuhar 11/1/2022
显然地。我的回答对你有帮助吗?
0赞 RagAnt 11/1/2022
是的。所以我的解析方式没有任何错误。由于格式错误的 HTML,它失败了。右?
1赞 Janez Kuhar 11/1/2022
是的,完全正确!