前幾天已經完成食材輸入框，也能檢查使用者是否有輸入內容。

不過，如果使用者輸入「雞蛋、番茄、洋蔥」，網站目前只會顯示已收到食材，還沒有把內容整理出來。

今天要進一步使用 JavaScript，將輸入的食材分開處理並顯示在畫面上。

一、為什麼需要整理食材？

使用者輸入食材時，可能會使用不同的分隔方式，例如：

• 雞蛋、番茄、洋蔥
• 雞蛋，番茄，洋蔥
• 雞蛋 番茄 洋蔥

如果未來要將這些資料傳送給 AI，先整理輸入內容會比較方便。

這次先支援常見的逗號、頓號和空白分隔方式。

二、加入食材整理功能

先在 HTML 中加入顯示結果的區域：

三、這次學到的新方法
split() 可以依照指定的分隔規則切分文字，將一整串文字整理成陣列。
filter() 可以排除不需要的資料，例如空白項目。
forEach() 則可以逐一處理陣列裡的每種食材。
最後，createElement() 和 appendChild() 可以建立新的 HTML 元素並加入網頁。
例如輸入：

「雞蛋、番茄、洋蔥」

畫面就會顯示：

• 雞蛋
• 番茄
• 洋蔥
  這樣就能清楚看到網站實際讀取到哪些食材。

四、成果
完成了食材文字的整理與顯示，讓使用者輸入的資料不再只是停留在輸入框裡。
這個功能也是未來串接 AI 的重要基礎，因為網站需要先取得使用者的需求，才能進一步產生適合的推薦內容。
明天將先不急著串接 AI，而是建立一個簡單的食譜推薦原型，確認整個流程能不能順利運作。