# 🏅 DAY43 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

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

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

#### match() 介紹 （[參考連結](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/match)）:
> 1. match() 函式可以用來做字串的比對，分析關鍵字是否存在於字串當中。
> 2. 它是根據「[正規表達式](https://5xruby.tw/posts/15min-regular-expression)」來進行實作的，有興趣的同學可以上網 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/znlcgmgk/pen/KKaoNxL?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 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）


<!-- 解答
https://codepen.io/znlcgmgk/pen/KKaoNxL?editors=1011
-->

| Slack | CodePen |
|:----------------:|:-------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/full/RwLNJvG |
| Iris Huang | https://codepen.io/ythuang/pen/VwMaxrm |
| 米米 | https://codepen.io/Jameshsu0407/pen/OJxNZrZ?editors=1010 |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/LYzNmzN|
| Yunei | https://codepen.io/Yunei/pen/yLzOEay |
| Gill | https://codepen.io/Gill-Chin/pen/wvrGXqZ?editors=1011 |
| POPEYE | https://codepen.io/popeye_ux/pen/RwLaJKJ |
|lumei|https://codepen.io/l_umei/pen/rNGxbNb|
| 連小艾 | https://codepen.io/bolaslien/pen/NWaNzQG?editors=1011 |
| Elaine Liu | https://codepen.io/elaine7598/pen/dyVMKJm?editors=1010 |
|Aaron Tu|https://github.com/ken888686/Hexschool-Final|
|Cheng Pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
| 小K | https://codepen.io/kelen1995/pen/XWedOog |
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/rNGxWaW |
| Kelvin Hsu | https://codepen.io/kelvin001/pen/RwLaYdj?editors=1011 |
|Calon|https://codepen.io/Calon0118/pen/ExwKJqP|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/BawKgoy?editors=1011 |
| YC | https://codepen.io/YCLu/pen/poWbeqG |
| 劉維倫 | https://codepen.io/lun0223/pen/dyVXRqE?editors=1010 |
|danny123|https://codepen.io/binlandz123/pen/ZEXOVMw?editors=1011 |
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/MWEjaBo?editors=1011|
|Louis| https://codepen.io/Louis164156/pen/YzrWjmK?editors=1010 |
|tingyu|https://codepen.io/dgltu/pen/bGowWOZ?editors=1011|
|鄭安志|https://codepen.io/lwmtsgek/pen/bGowojO?editors=0011|
| 傅劍軒 | https://codepen.io/seonkuraito/pen/qBPZYYZ?editors=0010 |
|Genos| https://codepen.io/pb220416/pen/VwMmBYM |
|Trista| https://codepen.io/trista6140/pen/mdBRByV |
paul|https://codepen.io/printfootya/pen/JjrEMQz?editors=1011|
|YuriT|https://codepen.io/wenfisht/pen/xxXqWqZ|
|AKI|https://codepen.io/akichen27/pen/NWaNqQN|
|Jasper|https://codepen.io/li-jasper/pen/zYEwKBN|
|Hamaji|https://codepen.io/hamajibashi/pen/KKXqwVj |