使用 Notion AI / ChatGPT 解析網頁內容和輸出 JSON

當網站沒有提供 API 時，為了取得方便 App 存取的網頁內容，我們通常要另外撰寫爬蟲程式將網頁內容整理成 JSON。

不過最近 Notion AI 和 ChatGPT 橫空出世後，我們不寫爬蟲也能將網頁整理成 JSON 了。

以下我們介紹兩種方法，這兩個方法都可透過 Notion AI 和 ChatGPT 產生 JSON，以下我們主要以 Notion AI 示範。

• 方法 1: 解析網頁的 html。
• 方法 2: 解析選取複製的網頁文字。

ps: 對 Notion AI 不熟的朋友，請先參考以下連結的說明。

使用 Notion AI 提升程式可讀性

方法 1: 解析網頁的 html

以威秀影城的電影為例，我們想將網頁的電影變成 JSON 格式的電影清單。

威秀影城 - VIESHOW CINEMAS

儲存網頁的 html，點選 File > Save As。

Format 選擇 Page Source。

找到 html 裡電影資料的區塊。從下圖可發現電影資料在 <ul class="movieList"> 下。

ps: 雖然我們也可以貼上整個 html，請 AI 找出其中的電影資料，不過測試時發現 AI 沒那麼聰明，因此身為聰明的人類，我們還是幫一下 AI，先幫它找出電影資料的區塊吧。

複製 <ul class="movieList"> 整個區塊的程式。

貼到 Notion。

請 Notion AI 生成 JSON，輸入以下問題。

將資料整理成 JSON，欄位需包含電影名，圖片網址，上映日期

Notion AI 不負所托，順利產生電影資料的 JSON。(ps: imageURL 的 .. 換成
https://www.vscinemas.com.tw/vsweb 即可生成圖片網址)

[
    {
        "movieName": "沙贊！眾神之怒",
        "imageURL": "../upload/film/film_20230218019.jpg",
        "releaseDate": "2023-03-16"
    },
    {
        "movieName": "鈴芽之旅",
        "imageURL": "../upload/film/film_20230218036.jpg",
        "releaseDate": "2023-03-02"
    },
    {
        "movieName": "關於我和鬼變成家人的那件事",
        "imageURL": "../upload/film/film_20230105001.jpg",
        "releaseDate": "2023-02-10"
    },
    {
        "movieName": "蟻人與黃蜂女：量子狂熱",
        "imageURL": "../upload/film/film_20230116003.jpg",
        "releaseDate": "2023-02-15"
    },
    {
        "movieName": "「鬼滅之刃」上弦集結，前進刀匠村",
        "imageURL": "../upload/film/film_20230201055.jpg",
        "releaseDate": "2023-02-17"
    },
    {
        "movieName": "灌籃高手 THE FIRST SLAM DUNK",
        "imageURL": "../upload/film/film_20230110014.jpg",
        "releaseDate": "2023-01-13"
    },
    {
        "movieName": "無人相信的真相",
        "imageURL": "../upload/film/film_20230218101.jpg",
        "releaseDate": "2023-03-17"
    },
    {
        "movieName": "悲情城市",
        "imageURL": "../upload/film/film_20230201043.jpg",
        "releaseDate": "2023-02-24"
    },
    {
        "movieName": "日麗",
        "imageURL": "../upload/film/film_20230130013.jpg",
        "releaseDate": "2023-02-10"
    },
    {
        "movieName": "寶塚歌劇 花組東京寶塚劇場公演『梅耶林』『ENCHANTEMENT-華麗的香水-』千秋樂 現場直播",
        "imageURL": "../upload/film/film_20230217006.jpg",
        "releaseDate": "2023-03-19"
    },
    {
        "movieName": "羽生結弦 notte stellata 現場直播",
        "imageURL": "../upload/film/film_20230302001.jpg",
        "releaseDate": "2023-03-12"
    }
]

方法 2: 解析選取複製的網頁文字

以最近即將開打的世界棒球經典賽為例。

2023年世界棒球經典賽 - 维基百科，自由的百科全书

選取複製 A 組賽程的表格。

複製的文字如下。

日期 客場球隊 比數 主場球隊 守備局數 球場 時間 觀眾 交戰記錄
3月8日 12:00 古巴  –  荷蘭   臺中市洲際棒球場 
  比賽總記錄
3月8日 19:00 巴拿馬  –  中華臺北   臺中市洲際棒球場 
  比賽總記錄
3月9日 12:00 巴拿馬  –  荷蘭   臺中市洲際棒球場 
  比賽總記錄
3月9日 19:00 義大利  –  古巴   臺中市洲際棒球場 
  比賽總記錄
3月10日 12:30 古巴  –  巴拿馬   臺中市洲際棒球場 
  比賽總記錄
3月10日 19:00 義大利  –  中華臺北   臺中市洲際棒球場 
  比賽總記錄
3月11日 12:00 巴拿馬  –  義大利   臺中市洲際棒球場 
  比賽總記錄
3月11日 19:00 荷蘭  –  中華臺北   臺中市洲際棒球場 
  比賽總記錄
3月12日 12:00 中華臺北  –  古巴   臺中市洲際棒球場 
  比賽總記錄
3月12日 19:00 荷蘭  –  義大利   臺中市洲際棒球場 
  比賽總記錄

在 Notion 貼上剛剛的文字後，請 Notion AI 生成 JSON，輸入以下問題。

請將資料整理成 JSON 格式，欄位名稱用 lowerCamelCase

Notion AI 再次成功地生成 JSON，以下為 2023 世界棒球經典賽的 JSON，希望台灣在預賽第一場順利打敗巴拿馬 !

[
    {
        "date": "3月8日 12:00",
        "awayTeam": "古巴",
        "awayScore": "-",
        "homeTeam": "荷蘭",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月8日 19:00",
        "awayTeam": "巴拿馬",
        "awayScore": "-",
        "homeTeam": "中華臺北",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月9日 12:00",
        "awayTeam": "巴拿馬",
        "awayScore": "-",
        "homeTeam": "荷蘭",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月9日 19:00",
        "awayTeam": "義大利",
        "awayScore": "-",
        "homeTeam": "古巴",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月10日 12:30",
        "awayTeam": "古巴",
        "awayScore": "-",
        "homeTeam": "巴拿馬",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月10日 19:00",
        "awayTeam": "義大利",
        "awayScore": "-",
        "homeTeam": "中華臺北",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月11日 12:00",
        "awayTeam": "巴拿馬",
        "awayScore": "-",
        "homeTeam": "義大利",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月11日 19:00",
        "awayTeam": "荷蘭",
        "awayScore": "-",
        "homeTeam": "中華臺北",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月12日 12:00",
        "awayTeam": "中華臺北",
        "awayScore": "-",
        "homeTeam": "古巴",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    },
    {
        "date": "3月12日 19:00",
        "awayTeam": "荷蘭",
        "awayScore": "-",
        "homeTeam": "義大利",
        "homeScore": "",
        "inning": "",
        "stadium": "臺中市洲際棒球場",
        "time": "",
        "audience": "",
        "record": ""
    }
]