如何使用JQuery解析HTML和提取数据

你的网页有时可能需要使用不提供API的其他网页的信息。例如，你可能需要从一个网页上实时获取股票价格信息，并将其显示在你的网页的一个小部件中。然而，一些股票价格汇总网站并不提供API。

在这种情况下，你需要检索网页的源HTML，并手动找到你需要的信息。这种检索和手动解析HTML以寻找特定信息的过程被称为网络爬取。

在本教程中，你将学习如何使用jQuery来抓取网页，jQuery是一个快速和多功能的解析和操作HTML的工具。尽管jQuery传统上用于从客户端JavaScript有效地与HTML和CSS交互，但它的DOM遍历和操作能力与它的AJAX功能相结合，使它成为网络爬取的可靠选择。

什么是客户端爬取？

客户端爬取包括使用页面的URL将网页的源头作为HTML来获取，并对信息进行解析以获得具体信息。

例如，你可能想建立一个代码搜索引擎。像Stack Overflow这样的网站提供了一个API，可以通过编程访问他们的问题和答案。然而，其他教程网站，如Draft.dev的这个网站，有代码块，但不提供消费信息的API。要阅读他们的代码块，你将不得不使用客户端 爬取，正如本教程所解释的那样。

使用jQuery实现客户端爬取功能

本教程告诉你如何使用jQuery爬取网页。jQuery是一个快速而强大的JavaScript库，支持HTML文档遍历和操作HTML元素属性。它还具有可以处理HTML元素事件的功能。jQuery使用CSS选择器来选择对象。

准备条件

首先，使用<script>标签添加一个对jQuery库的引用：

<script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>

使用Get获取远程页面

在本节中，你将学习如何使用jQueryget()方法来获取远程页面的HTML。get()方法使用http get请求从服务器上加载数据。

get()请求允许你定义一个回调函数，当get请求成功时可以执行。该回调函数也接受参数。

让我们考虑一下Draft.dev的博客中的一个网页样本。这个网页包含有ID的HTML元素和不同的类，还有一些带有属性。你将获取这个网页的完整HTML代码，并对其进行警告。

为了获取URL，将其传递给jQueryget()方法，并通过alert语句定义一个回调函数。你可以传递由get()请求返回的HTML数据，如下图所示：

这就是你如何使用jQueryget()方法获得一个网页的完整HTML源代码。

使用jQuery的查找方法提取所需的数据

在本节中，你将学习如何从HTML源中提取所需的数据（例如，提取特定HTML元素的文本或提取具有特定类别的元素的文本）。此外，你还将学习如何访问具有相同HTML类的元素。

注意：要知道网页中HTML元素的ID或类别，你可以右击网页，选择查看页面源选项。

jQuery提供了find()方法来搜索DOM元素集合中可用的后裔对象。你可以使用CSS选择器来寻找一个元素。CSS选择器定义了CSS样式所适用的元素。

使用ID获取元素文本

ID属性是用来为你的网页中的HTML元素指定一个唯一的ID。你不能为同一个HTML页面中的多个元素定义相同的ID。网页中的CSS和JavaScript使用这个ID来访问特定的元素，以设置样式或对元素进行任何其他操作。

在爬取数据的过程中，你可以使用这个ID来寻找和访问这个元素。示例的URL有一个ID为why-use-markdown的元素。使用find()方法，你可以找到这个ID的元素并打印它的文本信息。

要找到一个有ID的元素，你需要使用ID选择器，也就是#。例如，要选择一个ID为why-use-markdown的元素，在该元素的ID前加上#，并将其传递给find()方法，如下所示。一旦元素被选中，你可以使用text()方法来访问该元素的文本属性。

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {

  alert($(html).find("#why-use-markdown").text());
  
});

现在你已经使用它的ID访问了HTML元素。

使用类名获取元素文本

接下来，你将学习如何使用它的类来选择元素。类属性是用来指定HTML元素的类别的。与ID属性不同，你可以在一个网页中拥有多个具有相同类别的元素。

类属性允许你使用CSS定义一组样式。这个样式将被应用于所有使用该特定类定义的元素。在数据 爬取过程中，你可以使用这个类名来找到所有具有特定类的元素，并从这些元素中获取数据。

在示例的URL中，有一个元素的类别为page-title。

要找到一个带类的元素，你需要使用类选择器，即.例如，要选择一个带类page-title的元素，用元素的类作为前缀，并把它传递给find()方法，如下所示。一旦元素被选中，你可以使用text()方法来访问该元素的文本属性。

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  alert($(html).find(".page-title").text());
});

这就是你如何找到一个有类的元素。

处理具有相同类别的多个元素

正如前面所讨论的，在一个HTML文档中，有可能有不止一个元素拥有相同的类。因此，你现在将学习如何找到一个以上具有相同类的元素。

你可以使用find()方法用它的类名来寻找一个元素。当有更多具有相同类的元素时，你可以使用each()方法来遍历这些元素。定义的回调函数将被应用于每个元素。

在样本URL中，有多个元素被定义为高亮类。它是用来表示所有有markdown教程的代码块的类。

当你使用这个类找到元素时，你会得到一个jQuery对象的列表。然后你可以使用each()方法来迭代这些元素，并打印元素的文本来打印教程块，如下所示：

// Get HTML from page and fetching the element with ID 

$.get('https://draft.dev/learn/how-to-use-markdown', function(html) {
  
  // Loop through elements you want to scrape content from
  $(html).find(".highlight").each(function() {

    alert($(this).text());

  });

});

[文中代码源自Scrapingbee]

这样你就可以用它的类名找到一个元素，并对匹配的元素进行迭代。

安全方面的考虑

当从一个URL获取数据时，它可能包含脚本。默认情况下，jQuery的API不会运行这些脚本。然而，像<img onerror='script'>这样的HTML代码会间接地执行脚本。因此，你需要小心，清理或逃避脚本的来源。否则，未知的脚本可能会对你的程序造成损害，或者你有可能向黑客提供对你个人信息的访问。

限制条件

使用jQuery的客户端网络 爬取有一些限制。

1. 网页的来源可能会随着时间的推移而改变。因此，网页的类名或ID的任何变化都可能破坏 爬取应用程序。
2. 由于HTML元素结构、元素ID和元素类别的变化性质，经常变化的动态网页很难从客户端被 爬取另外，由于安全方面的考虑，脚本在 爬取时不会被执行。所以，被脚本加载的组件不会被加载到动态网页中。
3. 在用脚本加载数据的情况下，很难对有分页功能的页面进行刮擦。如果分页的实现，每个页面都有一个单独的URL（例如，https://example.com?page=<page_number>），那么只需发出单独的请求，就有可能进行刮擦。然而，如果这些页面是通过AJAX调用加载的（例如，一个无限滚动的页面），那么就很难爬取，因为脚本不能被jQuery执行。

因此，这种方法最适合于利用服务器端渲染、简单静态HTML或单页HTML的页面。

总    结

在这篇文章中，你已经学会了如何使用jQuery进行网页爬取，如何使用它的ID或HTML元素寻找元素，以及如何处理具有相同类别的HTML元素。

jQuery是一个快速和多功能的工具，它提供了解析和操作HTML DOM元素的功能，使你能够为网页建立强大的爬取应用程序。