僅使用 01 提示使用 ChatGPT 代碼解釋器進

僅使用 01 提示使用 ChatGPT 代碼解釋器進行網(wǎng)頁抓取（分步教程）

論您是否具有編程知識，執(zhí)行網(wǎng)頁抓取似乎是一項復雜且要求苛刻的任務。但是，ChatGPT 和代碼解釋器插件將為我們節(jié)省許多代碼行和麻煩，因為它只需一個提示即可在幾秒鐘內(nèi)從網(wǎng)頁中提取信息。

接下來，我們將通過三個示例看到如何使用 ChatGPT 以簡單實用的方式執(zhí)行網(wǎng)頁抓取，所有這些都是一步一步解釋的

讓我們開始...\

1）沃爾瑪

我們將使用沃爾瑪在線商店的“購買所有返校”部分。我在下面提供直接鏈接：

在返校 - Walmart.com 中購買所有返校產(chǎn)品

在“返校”中購買所有返校商店。購買產(chǎn)品，如 JLab 音頻 JBuddies 工作室兒童貼耳式...

www.walmart.com

步驟 1：定義要提取的字段

我們需要定義我們希望提取的信息。這非常重要，因為它將幫助我們以后在 ChatGPT 中構(gòu)建我們的提示

在這種情況下，我們將抓取產(chǎn)品名稱和價格

第 2 步：檢查代碼

在這里，我們需要定義 1 個產(chǎn)品的代碼（作為示例，然后將其輸入到 ChatGPT 中）

但在我們這樣做之前，請記住以下幾點：

要訪問 Chrome 中的檢查元素功能，如果您使用的是 Windows，則有兩個鍵盤快捷鍵選項：

a）按 + 移位 + c

或

b）按 + 移位 + i

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

a） alt + Command + i

或

b）選項 + 命令 + i

考慮到這一點，我們現(xiàn)在可以檢查沃爾瑪網(wǎng)站。讓我們回顧一下以下部分：

i）產(chǎn)品名稱

在這種情況下，我們需要在代碼中找到產(chǎn)品名稱進行抓取

讓我們復制它，然后將其包含在我們的提示中。要復制 span 標簽\，我們將鼠標懸停在該部分上，右鍵單擊，將出現(xiàn)以下內(nèi)容：

現(xiàn)在我們只是復制它，出于實際目的，我們將保留它方便，以便稍后包含在提示中

任天堂兒童超級馬里奧兄弟馬里奧世界17“筆記本電腦背包

ii ）價格

我們將對價格字段執(zhí)行相同的操作

我們將保留價格字段的復制元素供以后使用

.92

如果您需要從網(wǎng)頁中提取更多部分，則應重復我們對產(chǎn)品名稱和價格執(zhí)行的相同步驟

提示：\要在代碼區(qū)域內(nèi)快速找到要檢查的字段，只需將鼠標放在字段上，單擊鼠標右鍵，即可啟用檢查選項。

步驟 3：保存 HTML 文件

由于我們將使用代碼解釋器，因此我們需要向其附加一個文件。因此，我們要做的是將要抓取的頁面另存為HTML文件。

返回頁面并使用鍵盤快捷鍵 Ctrl + S（適用于 Windows 和 macOS)

鍵盤快捷鍵：按 Ctrl + s

接下來，將文件以 HTML 格式保存在本地文件夾中

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

現(xiàn)在我們已經(jīng)在 Web 上定義了要抓取的字段及其代碼，讓我們在 ChatGPT 中構(gòu)造提示

如果您尚未激活代碼解釋器，讓我們按照一些說明進行操作。否則，我建議您跳過此部分，直接進入構(gòu)造提示

i）設置

ii ）打開代碼解釋器

在 ChatGPT 中激活代碼解釋器后，讓我們上傳我們在步驟 3 中保存的 HTML 文件

現(xiàn)在，讓我們構(gòu)建提示，同時考慮產(chǎn)品名稱和價格，以及每個部分的代碼（如有疑問，請查看步驟 2)

提示：從HTML文件中，提取產(chǎn)品名稱和價格，將數(shù)據(jù)放在表格上并導出為CSV文件
這是一個產(chǎn)品的元素：任天堂兒童超級馬里奧兄弟馬里奧世界17“筆記本電腦背包
以下是價格的要素：
.92
如果缺少產(chǎn)品價格，請將該價格保留為空數(shù)據(jù)

在提示中，我們看到有 04 個部分。

在第一段中，我指定我已經(jīng)加載了一個 HTML 文件，并要求它抓取產(chǎn)品名稱和價格。完成此操作后，我請求它將數(shù)據(jù)導出到CSV文件中

在第二段和第三段中，我向 ChatGPT 提供了產(chǎn)品名稱和價格字段的每個相應結(jié)構(gòu)的示例。我們看到每個產(chǎn)品都是一個跨度\標簽，價格是一個 div 標簽\

在 last 段落中，如果它找到價格的空值，我要求它分配空\數(shù)據(jù)

請務必牢記此提示，因為即將推出的示例將具有相同的結(jié)構(gòu)，并且只會更改字段及其代碼

結(jié)果：

下載并打開 CSV\ 文件

最后，我們成功地對產(chǎn)品及其各自的價格進行了網(wǎng)絡抓取，然后將其導出為CSV文件，如表格圖像所示。請注意，我們用作示例的產(chǎn)品包括在內(nèi)！

獎金

前面的步驟使我們能夠從沃爾瑪網(wǎng)站的第一（01）頁執(zhí)行網(wǎng)絡抓取。但是，如果我們想從第二個（02）頁面中提取數(shù)據(jù)，我們執(zhí)行與前面相同的步驟，但不要忘記在此新頁面中識別產(chǎn)品并將其作為示例包含在提示中

沃爾瑪網(wǎng)站上“返校”部分的第02頁

i）產(chǎn)品名稱

Minecraft Boys Cliff Goats 圖形 T 恤，2 件裝，尺碼 4–18</跨度>

ii）價格

.96

就像第一頁一樣，我們需要將第二（02）頁的文件保存為HTML\格式（如果您有任何疑問，請查看步驟03)

提示

從HTML文件中，提取產(chǎn)品和價格的名稱，將數(shù)據(jù)放在表格上并將其導出為CSV文件。
這是一個產(chǎn)品的元素： Minecraft Boys Cliff Goats 圖形 T 恤，2 件裝，尺碼 4–18</跨度>
以下是價格的要素：
.96
如果缺少產(chǎn)品價格，請將該價格保留為空數(shù)據(jù)

如果您希望將兩個表合并為一個，您可以要求 ChatGPT 執(zhí)行以下操作：

2. 目標

在第二個示例中，我們將從目標網(wǎng)站的手機部分執(zhí)行網(wǎng)頁抓取。我們將直接繼續(xù)，如果有任何疑問，請參閱沃爾瑪?shù)牡谝粋€示例的步驟

這是直接鏈接：

手機：目標

購買目標手機，你會喜歡的手機，價格低廉。選擇當日送貨，開車或訂購取貨...

www.target.com

步驟 1：讓我們確定要提取的字段

a）產(chǎn)品 b）品牌 c）價格

現(xiàn)在，讓我們檢查每個目標字段的代碼級別（查看步驟 2）

用于檢查的鍵盤快捷鍵：Ctrl + Shift + c （Windows）或 Alt + Command + i（macOS)

步驟 2：檢查代碼

i）產(chǎn)品

我們找到代碼和標簽。我們復制并保留代碼，以便以后將其合并到 ChatGPT 提示符中（如有疑問，請查看第一個沃爾瑪示例的步驟 02）

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

ii）品牌

Apple

iii）價格

9.99

步驟 3：保存 HTML 文件

將要抓取的頁面另存為 HTML 文件（查看沃爾瑪示例中的步驟 3）

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

我們將構(gòu)造提示，但與前面的示例不同，我們將包括手機品牌字段（請參閱沃爾瑪示例的步驟 4）。

加載 HTML 文件并為每個要抓取的字段添加代碼（產(chǎn)品名稱、品牌和價格）

提示： 從HTML文件中，提取產(chǎn)品名稱，品牌，價格，將數(shù)據(jù)放在表格上并導出為CSV文件。提取所有產(chǎn)品
這是一個產(chǎn)品的元素： Tracfone Prepaid Apple iPhone SE 2nd Gen （64GB） CDMA — Black
以下是品牌的元素： Apple
以下是價格的元素：
9.99
如果缺少產(chǎn)品價格，請將該價格保留為空數(shù)據(jù)

結(jié)果

下載并打開 CSV\ 文件

結(jié)果很棒，我們能夠從 Target 網(wǎng)站抓取所有數(shù)據(jù)

3）亞馬遜

在最后一個示例中，我們將對 Kindle 書籍執(zhí)行網(wǎng)頁抓取。看看哪些書最受歡迎，然后使用 ChatGPT 創(chuàng)建具有不同趨勢主題的故事可能會很有趣

這是鏈接：

Amazon.com ：電子書點燃

回到學校殘疾客戶支持關閉到大學診所暢銷書客戶服務亞馬遜基礎知識音樂...

www.amazon.com

步驟1：讓我們確定要提取的字段

a）產(chǎn)品或標題 b）作者 c）價格

步驟 2：檢查代碼

i）產(chǎn)品或標題：

我們找到代碼和標簽。我們復制并保留代碼，以便稍后將其合并到 ChatGPT 提示符中（如有疑問，請查看第一個沃爾瑪示例的步驟 02)

要檢查的鍵盤快捷鍵是：Ctrl + Shift + c（Windows）或Alt + Command + i（macOS）。您可以參考步驟 2 了解更多詳情

Lessons in Chemistry： A Novel

ii ）作者

邦妮·加莫斯

iii）價格

請注意，對于此示例，我們只會提取價格的整數(shù)部分

14.

步驟 3：保存 HTML 文件

我們將要抓取的網(wǎng)頁保存為 HTML 文件。為此，我們使用快捷鍵 Ctrl + S 在我們要保存的頁面上。我們不要忘記將文件保存為 HTML 格式（檢查沃爾瑪示例的步驟 3 中的詳細信息)

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

現(xiàn)在，讓我們根據(jù)我們要從亞馬遜網(wǎng)頁中提取的字段來構(gòu)建提示，特別是從他們的 Kindle 書籍部分。在本例中，我們要提取標題、作者和價格。

接下來，我們加載 HTML 文件并添加代碼以抓取每個所需的字段（標題、作者和價格\）)

提示： 從HTML文件中，提取產(chǎn)品名稱、作者和價格，將數(shù)據(jù)放在表格上并導出為CSV文件。
這是一個產(chǎn)品的元素： Lessons in Chemistry： A Novel
以下是作者的元素： Bonnie Garmus
以下是價格元素： 14.
如果缺少產(chǎn)品價格，請將該價格保留為空數(shù)據(jù)

讓我們看到我們看到的示例中的提示具有相同的結(jié)構(gòu)

結(jié)果

我們下載 CSV\ 文件

我們成功了！

總結(jié)和建議

如果我們嘗試將URL直接放入ChatGPT，即使激活了代碼解釋器，它也無法執(zhí)行網(wǎng)頁抓取。出于這個原因，我們下載要在 HTML 中抓取的頁面
ChatGPT 最初可能無法識別要提取的字段的標簽，并且可能會向我們提供錯誤的信息。此時，我建議打開另一個聊天并再次運行提示
我們應該記住，代碼解釋器使用Python和庫，如BeautifulSoup進行網(wǎng)頁抓取。
此方法的目的不是取代傳統(tǒng)的網(wǎng)頁抓取，但是，它將節(jié)省我們的時間和代碼行
我們通過 03 個網(wǎng)頁抓取示例在故事中看到的內(nèi)容既面向從事編程工作的人，也面向在該領域知之甚少或一無所知的人
有趣的是，我們可以通過網(wǎng)絡抓取完成什么，正如我上面提到的，我們可以專注于直銷，創(chuàng)建 Kindle 書籍，考慮到暢銷書籍，分析競爭對手的價格，跟蹤某些產(chǎn)品等等

本完整指南適用于希望使用 ChatGPT 進行網(wǎng)頁抓取的替代方案的人。沒有必要有先前的編程知識，只需要好奇心和耐心。下個故事見，祝福！

在開始前：如有不準確的地方希望大家提出，文章可以改知識不能錯。

創(chuàng)建一個項目

這里以node項目為例

npm init

根據(jù)提示填寫相關信息

安裝eslint

npm install eslint --save

也可以全局安裝

npm install eslint -g

初始化 eslint文件

eslint --init

執(zhí)行命令后會出現(xiàn)如下提示

image.png

Answer Questions about your style:根據(jù)提示選擇相應的規(guī)則設置
Use a popular style guide:選擇一個已經(jīng)寫好的規(guī)則配置
Inspect your JavaScript file(s):根據(jù)源碼文件內(nèi)容生成規(guī)則配置

懶得去寫可以選擇第二項。
eslint 配置相關見官網(wǎng)，https://eslint.org/
命令執(zhí)行成功后會在項目根目錄下生成一個.eslintrc.js文件，使用linux ,mac系統(tǒng)同學注意設置隱藏文件顯示。檢查規(guī)則調(diào)整需要在.eslintrc.js文件中修改相應的配置項目。

VSCode相關配置

安裝插件

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

image.png

安裝成功后重啟VSCode

配置VSCode

打開VSCode配置頁面

image.png

添加如下配置

//為了符合eslint的兩個空格間隔原則
  "editor.tabSize": 2,
  //使用eslint規(guī)則重新格式化代碼
  "eslint.autoFixOnSave": true,
  //關閉自動文件自動存儲
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "jsx",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ],

以下為整個配置文件截圖

image.png

此時 VSCode 與 eslint 相關配置已經(jīng)結(jié)束

測試

創(chuàng)建index.js文件
并寫入內(nèi)容

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

VSCode會自動進行代碼質(zhì)量檢查如下圖

image.png

通常情況下需要根據(jù)錯誤提示手動對代碼進行相應的更改然后保存文件。因為在VSCode設置中配置了eslint.autoFixOnSave": true,此時直接保存文件VSCode會根據(jù)項目.eslintrc.js文件中的相關配置對代碼進行重新格式化，但是自動格式化只能完成代碼格式修改，對變量或方法定義單未使用這樣的規(guī)則不會進行調(diào)整。

寫在最后

VSCode 配合eslint 進行代碼質(zhì)量檢查屬于非強制性檢查既不符合規(guī)則的代碼在編譯時不會出錯只是Ide級的錯誤提示，如果想做強制質(zhì)量檢查可以在編譯腳本中加入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

要將僅包含空格的字符串視為空字符串，請在將字符串與空字符串進行比較之前調(diào)用該字符串的 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() 方法刪除字符串開頭和結(jié)尾的所有空格并返回一個新字符串，而不修改原始字符串。

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

小費

在驗證表單中的必填字段時修剪字符串有助于確保用戶輸入實際數(shù)據(jù)而不僅僅是空格。

如何檢查字符串是否為空、null 或未定義

根據(jù)您的情況，您可能需要考慮該字符串可能是一個空值（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 語句中使用字符串之前，使用可選的鏈接運算符 (?.) 調(diào)用該字符串的 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 或未定義的字符串上調(diào)用 trim() 方法而不會導致錯誤。相反，它會阻止方法調(diào)用并返回 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 進行比較之前調(diào)用 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

關注七爪網(wǎng)，獲取更多APP/小程序/網(wǎng)站源碼資源！

在線咨詢

上一篇：從輸入url開始能做哪些優(yōu)化
下一篇：如何獲得免費英文文獻翻譯呢？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

僅使用 01 提示使用 ChatGPT 代碼解釋器進

1） 沃爾瑪

在返校 - Walmart.com 中購買所有返校產(chǎn)品

在“返校”中購買所有返校商店。購買產(chǎn)品，如 JLab 音頻 JBuddies 工作室兒童貼耳式...

步驟 1：定義要提取的字段

第 2 步：檢查代碼

i） 產(chǎn)品名稱

ii ） 價格

步驟 3：保存 HTML 文件

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

結(jié)果：

獎金

2. 目標

手機 ： 目標

購買目標手機，你會喜歡的手機，價格低廉。選擇當日送貨，開車或訂購取貨...

步驟 1：讓我們確定要提取的字段

步驟 2：檢查代碼

i） 產(chǎn)品

ii） 品牌

iii） 價格

步驟 3：保存 HTML 文件

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

結(jié)果

3） 亞馬遜

Amazon.com ： 電子書點燃

回到學校 殘疾客戶支持 關閉到大學診所 暢銷書 客戶服務 亞馬遜基礎知識 音樂...

步驟1：讓我們確定要提取的字段

步驟 2：檢查代碼

步驟 3：保存 HTML 文件

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

結(jié)果

總結(jié)和建議

創(chuàng)建一個項目

安裝eslint

初始化 eslint文件

VSCode相關配置

安裝插件

配置VSCode

測試

寫在最后

您的項目需求

1）沃爾瑪

i）產(chǎn)品名稱

ii ）價格

手機：目標

i）產(chǎn)品

ii）品牌

iii）價格

3）亞馬遜

Amazon.com ：電子書點燃

回到學校殘疾客戶支持關閉到大學診所暢銷書客戶服務亞馬遜基礎知識音樂...