论您是否具有编程知识，执行网页抓取似乎是一项复杂且要求苛刻的任务。但是，ChatGPT 和代码解释器插件将为我们节省许多代码行和麻烦，因为它只需一个提示即可在几秒钟内从网页中提取信息。

接下来，我们将通过三个示例看到如何使用 ChatGPT 以简单实用的方式执行网页抓取，所有这些都是一步一步解释的

让我们开始...\

1） 沃尔玛

我们将使用沃尔玛在线商店的“购买所有返校”部分。我在下面提供直接链接：

在返校 - Walmart.com 中购买所有返校产品

在“返校”中购买所有返校商店。购买产品，如 JLab 音频 JBuddies 工作室儿童贴耳式...

www.walmart.com

步骤 1：定义要提取的字段

我们需要定义我们希望提取的信息。这非常重要，因为它将帮助我们以后在 ChatGPT 中构建我们的提示

在这种情况下，我们将抓取产品名称和价格

第 2 步：检查代码

在这里，我们需要定义 1 个产品的代码（作为示例，然后将其输入到 ChatGPT 中）

但在我们这样做之前，请记住以下几点：

要访问 Chrome 中的检查元素功能，如果您使用的是 Windows，则有两个键盘快捷键选项：

a） 按 + 移位 + c

或

b） 按 + 移位 + i

如果您使用的是 macOS，请使用：

a） alt + Command + i

或

b） 选项 + 命令 + i

考虑到这一点，我们现在可以检查沃尔玛网站。让我们回顾一下以下部分：

i） 产品名称

在这种情况下，我们需要在代码中找到产品名称进行抓取

让我们复制它，然后将其包含在我们的提示中。要复制 span 标签\，我们将鼠标悬停在该部分上，右键单击，将出现以下内容：

现在我们只是复制它，出于实际目的，我们将保留它方便，以便稍后包含在提示中

任天堂儿童超级马里奥兄弟马里奥世界17“笔记本电脑背包

ii ） 价格

我们将对价格字段执行相同的操作

我们将保留价格字段的复制元素供以后使用

.92

如果您需要从网页中提取更多部分，则应重复我们对产品名称和价格执行的相同步骤

提示：\要在代码区域内快速找到要检查的字段，只需将鼠标放在字段上，单击鼠标右键，即可启用检查选项。

步骤 3：保存 HTML 文件

由于我们将使用代码解释器，因此我们需要向其附加一个文件。因此，我们要做的是将要抓取的页面另存为HTML文件。

返回页面并使用键盘快捷键 Ctrl + S（适用于 Windows 和 macOS)

键盘快捷键：按 Ctrl + s

接下来，将文件以 HTML 格式保存在本地文件夹中

第 4 步：上传 HTML 文件 + 生成提示

现在我们已经在 Web 上定义了要抓取的字段及其代码，让我们在 ChatGPT 中构造提示

如果您尚未激活代码解释器，让我们按照一些说明进行操作。否则，我建议您跳过此部分，直接进入构造提示

i） 设置

ii ） 打开代码解释器

在 ChatGPT 中激活代码解释器后，让我们上传我们在步骤 3 中保存的 HTML 文件

现在，让我们构建提示，同时考虑产品名称和价格，以及每个部分的代码（如有疑问，请查看步骤 2)

提示：从HTML文件中，提取产品名称和价格，将数据放在表格上并导出为CSV文件

这是一个产品的元素： 任天堂儿童超级马里奥兄弟马里奥世界17“笔记本电脑背包

以下是价格的要素：

.92

如果缺少产品价格，请将该价格保留为空数据

在提示中，我们看到有 04 个部分。

在第一段中，我指定我已经加载了一个 HTML 文件，并要求它抓取产品名称和价格。完成此操作后，我请求它将数据导出到CSV文件中

在第二段和第三段中，我向 ChatGPT 提供了产品名称和价格字段的每个相应结构的示例。我们看到每个产品都是一个跨度\标签，价格是一个 div 标签\

在 last 段落中，如果它找到价格的空值，我要求它分配空\数据

请务必牢记此提示，因为即将推出的示例将具有相同的结构，并且只会更改字段及其代码

结果：

下载并打开 CSV\ 文件

最后，我们成功地对产品及其各自的价格进行了网络抓取，然后将其导出为CSV文件，如表格图像所示。请注意，我们用作示例的产品包括在内！

奖金

前面的步骤使我们能够从沃尔玛网站的第一（01）页执行网络抓取。但是，如果我们想从第二个 （02） 页面中提取数据，我们执行与前面相同的步骤，但不要忘记在此新页面中识别产品并将其作为示例包含在提示中

沃尔玛网站上“返校”部分的第02页

i） 产品名称

Minecraft Boys Cliff Goats 图形 T 恤，2 件装，尺码 4–18</跨度>

ii） 价格

.96

就像第一页一样，我们需要将第二（02）页的文件保存为HTML\格式（如果您有任何疑问，请查看步骤03)

提示

从HTML文件中，提取产品和价格的名称，将数据放在表格上并将其导出为CSV文件。

这是一个产品的元素： Minecraft Boys Cliff Goats 图形 T 恤，2 件装，尺码 4–18</跨度>

以下是价格的要素：

.96

如果缺少产品价格，请将该价格保留为空数据

如果您希望将两个表合并为一个，您可以要求 ChatGPT 执行以下操作：

2. 目标

在第二个示例中，我们将从目标网站的手机部分执行网页抓取。我们将直接继续，如果有任何疑问，请参阅沃尔玛的第一个示例的步骤

这是直接链接：

手机 ： 目标

购买目标手机，你会喜欢的手机，价格低廉。选择当日送货，开车或订购取货...

www.target.com

步骤 1：让我们确定要提取的字段

a） 产品 b） 品牌 c） 价格

现在，让我们检查每个目标字段的代码级别（查看步骤 2）

用于检查的键盘快捷键：Ctrl + Shift + c （Windows） 或 Alt + Command + i（macOS)

步骤 2：检查代码

i） 产品

我们找到代码和标签。我们复制并保留代码，以便以后将其合并到 ChatGPT 提示符中（如有疑问，请查看第一个沃尔玛示例的步骤 02）

Tracfone Prepaid Apple iPhone SE 2nd Gen （64GB） CDMA — Black

ii） 品牌

Apple

iii） 价格

9.99

步骤 3：保存 HTML 文件

将要抓取的页面另存为 HTML 文件（查看沃尔玛示例中的步骤 3）

第 4 步：上传 HTML 文件 + 生成提示

我们将构造提示，但与前面的示例不同，我们将包括手机品牌字段（请参阅沃尔玛示例的步骤 4）。

加载 HTML 文件并为每个要抓取的字段添加代码（产品名称、品牌和价格）

提示： 从HTML文件中，提取产品名称，品牌，价格，将数据放在表格上并导出为CSV文件。提取所有产品

这是一个产品的元素： Tracfone Prepaid Apple iPhone SE 2nd Gen （64GB） CDMA — Black

以下是品牌的元素： Apple

以下是价格的元素：

9.99

如果缺少产品价格，请将该价格保留为空数据

结果

下载并打开 CSV\ 文件

结果很棒，我们能够从 Target 网站抓取所有数据

3） 亚马逊

在最后一个示例中，我们将对 Kindle 书籍执行网页抓取。看看哪些书最受欢迎，然后使用 ChatGPT 创建具有不同趋势主题的故事可能会很有趣

这是链接：

Amazon.com ： 电子书点燃

回到学校 残疾客户支持 关闭到大学诊所 畅销书 客户服务 亚马逊基础知识 音乐...

www.amazon.com

步骤1：让我们确定要提取的字段

a） 产品或标题 b） 作者 c） 价格

步骤 2：检查代码

i） 产品或标题：

我们找到代码和标签。我们复制并保留代码，以便稍后将其合并到 ChatGPT 提示符中（如有疑问，请查看第一个沃尔玛示例的步骤 02)

要检查的键盘快捷键是：Ctrl + Shift + c（Windows）或Alt + Command + i（macOS）。您可以参考步骤 2 了解更多详情

Lessons in Chemistry： A Novel

ii ） 作者

邦妮·加莫斯

iii） 价格

请注意，对于此示例，我们只会提取价格的整数部分

14.

步骤 3：保存 HTML 文件

我们将要抓取的网页保存为 HTML 文件。为此，我们使用快捷键 Ctrl + S 在我们要保存的页面上。我们不要忘记将文件保存为 HTML 格式（检查沃尔玛示例的步骤 3 中的详细信息)

第 4 步：上传 HTML 文件 + 生成提示

现在，让我们根据我们要从亚马逊网页中提取的字段来构建提示，特别是从他们的 Kindle 书籍部分。在本例中，我们要提取标题、作者和价格。

接下来，我们加载 HTML 文件并添加代码以抓取每个所需的字段（标题、作者和价格\）)

提示： 从HTML文件中，提取产品名称、作者和价格，将数据放在表格上并导出为CSV文件。

这是一个产品的元素： Lessons in Chemistry： A Novel

以下是作者的元素： Bonnie Garmus

以下是价格元素： 14.

如果缺少产品价格，请将该价格保留为空数据

让我们看到我们看到的示例中的提示具有相同的结构

结果

我们下载 CSV\ 文件

我们成功了！

总结和建议

1. 如果我们尝试将URL直接放入ChatGPT，即使激活了代码解释器，它也无法执行网页抓取。出于这个原因，我们下载要在 HTML 中抓取的页面
2. ChatGPT 最初可能无法识别要提取的字段的标签，并且可能会向我们提供错误的信息。此时，我建议打开另一个聊天并再次运行提示
3. 我们应该记住，代码解释器使用Python和库，如BeautifulSoup进行网页抓取。
4. 此方法的目的不是取代传统的网页抓取，但是，它将节省我们的时间和代码行
5. 我们通过 03 个网页抓取示例在故事中看到的内容既面向从事编程工作的人，也面向在该领域知之甚少或一无所知的人
6. 有趣的是，我们可以通过网络抓取完成什么，正如我上面提到的，我们可以专注于直销，创建 Kindle 书籍，考虑到畅销书籍，分析竞争对手的价格，跟踪某些产品等等

本完整指南适用于希望使用 ChatGPT 进行网页抓取的替代方案的人。没有必要有先前的编程知识，只需要好奇心和耐心。下个故事见，祝福！

在开始前：如有不准确的地方希望大家提出，文章可以改知识不能错。

创建一个项目

这里以node项目为例

npm init 

根据提示填写相关信息

安装eslint

npm install eslint --save

也可以全局安装

npm install eslint -g

初始化 eslint文件

eslint --init

执行命令后会出现如下提示

Answer Questions about your style:根据提示选择相应的规则设置
Use a popular style guide:选择一个已经写好的规则配置
Inspect your JavaScript file(s):根据源码文件内容生成规则配置

懒得去写可以选择第二项。
eslint 配置相关 见官网，https://eslint.org/
命令执行成功后会在项目根目录下生成一个.eslintrc.js文件，使用linux ,mac系统同学注意设置隐藏文件显示。检查规则调整需要在.eslintrc.js文件中修改相应的配置项目。

VSCode相关配置

安装插件

VSCode 插件安装器中搜索‘eslint’并安装

安装成功后重启VSCode

配置VSCode

打开VSCode配置页面

添加如下配置

//为了符合eslint的两个空格间隔原则
  "editor.tabSize": 2,
  //使用eslint规则重新格式化代码
  "eslint.autoFixOnSave": true,
  //关闭自动文件自动存储
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "jsx",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ],

以下为整个配置文件截图

此时 VSCode 与 eslint 相关配置已经结束

测试

创建index.js文件
并写入内容

function hello () {
  console.log('Hello Eslint');
}
hello()

VSCode会自动进行代码质量检查如下图

通常情况下需要根据错误提示手动对代码进行相应的更改然后保存文件。因为在VSCode设置中配置了eslint.autoFixOnSave": true,此时直接保存文件VSCode会根据项目.eslintrc.js文件中的相关配置对代码进行重新格式化，但是自动格式化只能完成代码格式修改，对变量或方法定义单未使用这样的规则不会进行调整。

写在最后

VSCode 配合eslint 进行代码质量检查属于非强制性检查既不符合规则的代码在编译时不会出错只是Ide级的错误提示，如果想做强制质量检查可以在编译脚本中加入eslint相关配置。

5人点赞

JavaScript

解多种在 JavaScript 中轻松检查字符串是否为空的方法。

1. 将字符串与空字符串进行比较

要检查 JavaScript 中的字符串是否为空，我们可以在 if 语句中将字符串与空字符串 ('') 进行比较。

例如：

function checkIfEmpty(str) {
  if (str==='') {
    console.log('String is empty');
  } else {
    console.log('String is NOT empty');
  }
}const str1='not empty';
const str2=''; // emptycheckIfEmpty(str1); // outputs: String is NOT empty
checkIfEmpty(str2); // outputs: String is empty

要将仅包含空格的字符串视为空字符串，请在将字符串与空字符串进行比较之前调用该字符串的 trim() 方法。

function checkIfEmpty(str) {
  if (str.trim()==='') {
    console.log('String is empty');
  } else {
    console.log('String is NOT empty');
  }
}const str1='not empty';
const str2=''; // empty
const str3='   '; // contains only whitespacecheckIfEmpty(str1); // outputs: String is NOT empty
checkIfEmpty(str2); // outputs: String is empty
checkIfEmpty(str3); // outputs: String is empty

String trim() 方法删除字符串开头和结尾的所有空格并返回一个新字符串，而不修改原始字符串。

const str1='  bread  ';
const str2='   milk tea    ';console.log(str1.trim()); // 'bread'
console.log(str2.trim()); // 'milk tea'

小费

在验证表单中的必填字段时修剪字符串有助于确保用户输入实际数据而不仅仅是空格。

如何检查字符串是否为空、null 或未定义

根据您的情况，您可能需要考虑该字符串可能是一个空值（null 或未定义）。 要检查这一点，请直接使用字符串 if 语句，如下所示：

function checkIfEmpty(str) {
  if (str) {
    console.log('String is NOT empty');
  } else {
    console.log('String is empty');
  }
}const str1='not empty';
const str2=''; // empty
const str3=null;
const str4=undefined;checkIfEmpty(str1); // outputs: String is NOT empty
checkIfEmpty(str2); // outputs: String is empty
checkIfEmpty(str3); // outputs: String is empty
checkIfEmpty(str4); // outputs: String is empty

如果字符串为空或为空，则在 if 语句中将其强制为 false。 否则，它将被强制为真。

要删除所有空格并检查空值，请在 if 语句中使用字符串之前，使用可选的链接运算符 (?.) 调用该字符串的 trim() 方法。

function checkIfEmpty(str) {
  if (str?.trim()) {
    console.log('String is NOT empty');
  } else {
    console.log('String is empty');
  }
}const str1='not empty';
const str2=''; // empty
const str3=null;
const str4=undefined;
const str5='    '; // contains only whitespacecheckIfEmpty(str1); // outputs: String is NOT empty
checkIfEmpty(str2); // outputs: String is empty
checkIfEmpty(str3); // outputs: String is empty
checkIfEmpty(str4); // outputs: String is empty
checkIfEmpty(str5); // outputs: String is empty

可选的链式操作符让我们可以在 null 或未定义的字符串上调用 trim() 方法而不会导致错误。 相反，它会阻止方法调用并返回 undefined。

const str1=null;
const str2=undefined;console.log(str1?.trim()); // undefined
console.log(str2?.trim()); // undefined

2.比较字符串的长度和0

或者，我们可以访问字符串的长度属性并将其值与 0 进行比较，以检查字符串是否为空。

function checkIfEmpty(str) {
  if (str.length===0) {
    console.log('String is empty');
  } else {
    console.log('String is NOT empty');
  }
}const str1='not empty';
const str2=''; // emptycheckIfEmpty(str1); // outputs: String is NOT empty
checkIfEmpty(str2); // outputs: String is empty

要使用这种方法检查仅包含空格的字符串，我们还将在将修剪后的字符串的长度与 0 进行比较之前调用 trim() 方法。

function checkIfEmpty(str) {
  if (str.trim().length===0) {
    console.log('String is empty');
  } else {
    console.log('String is NOT empty');
  }
}const str1='not empty';
const str2=''; // empty
const str3='   '; // contains only whitespacecheckIfEmpty(str1); // outputs: String is NOT empty
checkIfEmpty(str2); // outputs: String is empty
checkIfEmpty(str3); // outputs: String is empty

关注七爪网，获取更多APP/小程序/网站源码资源！