---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 45 - 關鍵字搜尋功能

請同學使用 [這個模板](https://codepen.io/hexschool/pen/bGKqbQQ?editors=1011) 進行練習，嘗試實作「關鍵字搜尋」的功能。

教學
---
今天的每日任務並不在課程錄影範圍內，為加碼的知識分享，因此提供小教學讓大家做練習。關鍵字搜尋是蠻實用的技巧，同學可以直接觀看解答再自己練習看看。

### match() 介紹（[參考連結](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/match)）：
> 1. match() 函式可以用來做字串的比對，分析關鍵字是否存在於字串當中。
> 2. 它是根據「[正規表達式](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions)」來進行實作的，有興趣的同學可以上網 Google，這邊就不詳細介紹正規表達式的運作方式。
> 3. 「關鍵字」可以是中 / 英文。如果關鍵字存在，則 match() 會回傳一個包含那個關鍵字的陣列; 如果關鍵字不存在，則 match() 會回傳 null。
> 4. 注意，關鍵字在字串中必須是「連續的」，像是以下範例的 keywordSeparate 就會回傳 null。

範例：

//  想要用來比對的字串
let str = "我是 HexSchool 的大帥哥";
//  以下為 4 種關鍵字
let keywordChinese = "大帥哥"; 
let keywordEnglish = "HexSch";
let keywordNull = "不存在";
let keywordSeparate = "大哥";

console.log(str.match(keywordChinese)); // 回傳 ["大帥哥"]
console.log(str.match(keywordEnglish)); // 回傳 ["HexSch"]
console.log(str.match(keywordNull)); // 回傳 null
console.log(str.match(keywordSeparate)); // 回傳 null

### 教學開始（請搭配 [解答](https://codepen.io/hexschool/pen/rNKyBRO?editors=1011) 觀看）
### 步驟一：取得 input 的文字內容，並使用 trim()、toLowerCase() 做字串處理
> 1. .trim() 可以移除字串首尾的空白，避免發生錯誤;
> 2. .toLowerCase() 可以把英文字母都轉成小寫，建議要比對的字串、關鍵字都做這項處理，這樣不管輸入的關鍵字英文字母大小寫為何，都能找到相符合的產品。

### 步驟二：搭配 filter() 做篩選（JS 第 50 - 53 行）
> 1. 設定「產品的標題」為欲比對的字串。
> 2. 設定 filter() 的 return 條件為「match() 的回傳值」。如果關鍵字存在，則 match() 會回傳一個陣列; 如果關鍵字不存在，則 match() 會回傳 null。
> 3. 在 JS 中，陣列為真值，會被轉換為 true; null 假值，會被轉換為 false ([參考連結](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy))

### 步驟三：進行畫面渲染

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

請記得填入自己的 API 名稱
https://codepen.io/hexschool/pen/rNKyBRO?editors=1011
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
|Kimi #9564|[CodePen](https://codepen.io/kimihu91/pen/mdKjLLY)|
|albee#9121|[Codepen](https://codepen.io/albee-chang/pen/yLERvag?editors=1011)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/vYrVdpq)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/yLERvjo)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/ZERqxKm?editors=0011) |
|薯餅#3581|[CodePen](https://codepen.io/ColdingPoTaTo/pen/yLERvob)|
|banazita#5143|[CodePen](https://codepen.io/banazita/pen/gOKvmmm?editors=1011)|
|jimmyFang#9575|[CodePen](https://codepen.io/pohxiqqo/pen/poKxKbN?editors=1001)|
|yawun#0042|[CodePen](https://codepen.io/monicalin/pen/RwJeJqw)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/KKeGegg?editors=0011)|
|Ruby Chen#7452|[CodePen](https://codepen.io/ruby92429/pen/VwdEgaE?editors=1011)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/XWYxZJa)|
|hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/abKQdKp?editors=0011)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/GRGYzxK?editors=1011)|
|shinyhung#3825|[Codepen](https://codepen.io/sean_1215/pen/KKeGQOy?editors=0010)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/JjZmqNZ?editors=1011)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/JjZmQjz)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/dyKgxPN?editors=0010)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/OJEoxbM)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/ZERmOGo?editors=1011)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/eYKLVEM?editors=1000)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/ExROXZG)|
|yen#5757|[codepen](https://codepen.io/TZU-HUANG-YEN/pen/poKQBgq?editors=0010)|
|WEI_RIO#9342|[codepen](https://codepen.io/wei_wu/pen/JjZwjXw?editors=1011)|
|m_m#5493|[CodePen](https://codepen.io/minnn7716/pen/OJEBBQV)|
|法希娜#3206|[CodePen](https://codepen.io/yiiserpf-the-encoder/pen/mdKayem?editors=1011)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/jOKXwym?editors=1011)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/gOKZrWq)|
|Shuo#1596|[Codepen](https://codepen.io/azami/pen/gOKZrWq)|
|蓁心#6229|[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/xxJKBgo?editors=1010)|