jQuery contains 可以抓大小寫的方法

2020-01-11 113 words One minute

Contents

最近在做單頁表格篩選時，原本想直接用 jQuery 的 :contains() selector 來找文字，結果很快就遇到一個實務問題：它是區分大小寫的。也就是說，你搜尋 apple 的時候，不一定抓得到 Apple。

如果畫面資料量不大，這類需求其實很常見，像是搜尋表格欄位、下拉選單項目、簡單關鍵字過濾都會用到。這篇把原因和實作方式一起整理一下。

為什麼 :contains() 會有這個問題

jQuery 內建的 :contains() 本質上就是做字串比對，而預設比對不會幫你先轉成同一種大小寫，因此：

1

$('td:contains("apple")')

通常只會抓到完全符合大小寫的內容。

做法：自訂一個不分大小寫的 selector

可以透過 $.extend($.expr[":"], …) 擴充一個新的 selector，例如叫做 containsIN。

參考如下方法：

1
2
3
4
5
6
7


$.extend($.expr[":"], {
  "containsIN": function(elem, i, match, array) {
    return (elem.textContent || elem.innerText || "")
      .toLowerCase()
      .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

使用方式

1

$('td:containsIN("' + value + '")')

這樣就能抓到 Apple、APPLE、apple 這類不同大小寫的內容。

實務上要注意什麼

1. 這是前端 DOM 查詢，不適合大量資料

如果你的資料列很多，直接在 DOM 上做 selector 搜尋還是會有成本。資料量大時，通常改成先在 JavaScript 陣列內做 filter()，再重新 render 畫面，會比一直掃 DOM 還穩。

2. 只適合簡單頁面

如果專案已經是 Vue、React 這類框架，通常不太建議再混用這種 jQuery selector 技巧，避免狀態管理變得混亂。

3. 中文搜尋通常沒差，但英文常遇到

這個問題在中文內容上不明顯，但只要表格內有英文代碼、Email、帳號、產品名稱，就很容易踩到。

小結

jQuery :contains() 很方便，但預設是區分大小寫的。若只是小型頁面、快速補一個搜尋功能，自訂 containsIN 是很實用的方法；如果資料量大或已使用前端框架，建議改走資料層比對會比較乾淨。