iT邦幫忙

2025 iThome 鐵人賽

0
自我挑戰組

給愛追劇的你:30天互動網站挑戰系列 第 19

Day 19:搜尋加強(模糊比對 + 去除全形/空白)

  • 分享至 

  • xImage
  •  

我們在 Day 9 已完成基本搜尋。今天做體驗升級:全形/半形統一、忽略多餘空白、簡易模糊比對(包含順序相近也可命中)。

改哪裡js/app.jsapplyFilters()

function norm(s){
  return s.toString()
    .toLowerCase()
    .replace(/\s+/g, '')            // 去空白
    .replace(/[A-Za-z0-9]/g, ch => String.fromCharCode(ch.charCodeAt(0) - 0xFEE0)); // 全形→半形
}

// 簡易模糊:關鍵字中每個連續字母都出現在目標(順序保留)
function fuzzyIncludes(target, key){
  if (!key) return true;
  let i = 0, j = 0;
  while (i < target.length && j < key.length){
    if (target[i] === key[j]) j++;
    i++;
  }
  return j === key.length;
}

function applyFilters(){
  const active = new Set(getActiveGenres());
  const kw = norm(keyword.trim());
  return SHOWS.filter(s=>{
    const byGenre = active.size ? s.genres.some(g => active.has(g)) : true;
    const titleN  = norm(s.title);
    const byKw    = kw ? (titleN.includes(kw) || fuzzyIncludes(titleN, kw)) : true;
    return byGenre && byKw;
  });
}

上一篇
Day 18:排序功能(評分/時間,升/降)
下一篇
Day 20:資料持久化加強(版本鍵 + 資料結構升級)
系列文
給愛追劇的你:30天互動網站挑戰30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言