本文提供了一份全面的指南，旨在教授如何高效地从复杂的html文档中提取特定文本。我们将重点介绍两种主要方法：利用java/kotlin中的jsoup库进行服务器端解析，以及使用javascript进行客户端数据提取。通过实际代码示例，您将学习如何精准定位并获取如uuid等关键数据，并了解在不同应用场景下的最佳实践和注意事项。
在网页数据抓取或前端数据处理的场景中，从复杂的html结构中精准提取特定文本是一项常见且重要的任务。例如，从一个包含大量表格和嵌套标签的HTML片段中，我们可能需要获取某个特定描述（如“name:”）对应的唯一标识符（UUID）。本教程将详细介绍如何通过java/Kotlin中的jsoup库和javascript来实现这一目标。
Jsoup解决方案：服务器端HTML解析
Jsoup是一个强大的Java库，用于解析HTML文档，提供了一套类似于jquery的API，可以方便地通过css选择器来查找、修改和提取数据。
问题分析
在原始问题中，用户尝试使用 document.select(“td:contains(name:)”).get(0) 来获取目标文本。这个选择器能够成功定位到包含“name:”文本的 <td> 元素。然而，我们的目标是该 <td> 元素 相邻的兄弟 <td> 元素 中包含的 <span> 标签内的文本。直接获取 td:contains(name:) 的结果，只会得到整个 <td> 元素及其所有子内容，而非我们期望的纯文本值。
精准定位与提取
为了获取与“name:”关联的UUID，我们需要一个更精确的css选择器。利用Jsoup强大的选择器功能，我们可以结合“内容包含选择器”(:contains()) 和“相邻兄弟选择器”(+) 来实现。
立即学习“Java免费学习笔记（深入）”；
CSS选择器解释：
- td:contains(name:): 这个选择器会匹配所有内容中包含“name:”文本的 <td> 元素。在我们的HTML结构中，它会选中 <b>name:</b> 所在的那个 <td>。
- + td: 这是一个相邻兄弟选择器。它会匹配紧跟在前面 <td> 元素之后的第一个 <td> 兄弟元素。这正是我们目标UUID所在的 <td>。
- > span: 这是一个子元素选择器。它会匹配前面选中的 <td> 元素的直接子 <span> 元素。最终，我们成功定位到包含UUID的 <span> 标签。
示例代码 (Java):
import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; public class JsoupHtmlExtractor { public static void main(String[] args) { // 模拟HTML内容，实际应用中可能来自网络请求或文件读取 String htmlContent = """ <td> <div> <h3>Id:</h3> <table style="border: none"> <tbody> <tr> <td style="border: none"><b>id:</b></td> <td style="border: none"><span style="margin-left: 15px">testuuid1</span></td> </tr> <tr> <td style="border: none"><b>idtype:</b></td> <td style="border: none"><span style="margin-left: 15px">uuid</span></td> </tr> <tr> <td style="border: none"><b>territory:</b></td> <td style="border: none"><span style="margin-left: 15px">GB</span></td> </tr> <tr> <td style="border: none"><b>type:</b></td> <td style="border: none"><span style="margin-left: 15px">cover</span></td> </tr> <tr> <td style="border: none"><b>version:</b></td> <td style="border: none"><span style="margin-left: 15px">aa3601f8-219a-43e6-be36-0aa49d2f0943</span></td> </tr> </tbody> </table> </div> <div> <h3>File:</h3> <table style="border: none"> <tbody> <tr> <td style="border: none"><b>extension:</b></td> <td style="border: none"><span style="margin-left: 15px">jpg</span></td> </tr> <tr> <td style="border: none"><b>md5Checksum:</b></td> <td style="border: none"><span style="margin-left: 15px">f5e1725f067a697805f4af28bef55720</span></td> </tr> <tr> <td style="border: none"><b>mimeType:</b></td> <td style="border: none"><span style="margin-left: 15px">image/jpeg</span></td> </tr> <tr> <td style="border: none"><b>name:</b></td> <td style="border: none"><span style="margin-left: 15px">cb6a296b-c7ba-4228-b9f2-d6e39947814e</span></td> </tr> <tr> <td style="border: none"><b>path:</b></td> <td style="border: none"><span style="margin-left: 15px"></span></td> </tr> </tbody> </table> </div> <div> <h3>FileInfo:</h3> <table style="border: none"> <tbody> <tr> <td style="border: none"><b>created:</b></td> <td style="border: none"><span style="margin-left: 15px">2022-08