JavaScript 判斷 textarea 是否包含特定字串的方法

在前端開發中，經常需要檢查使用者在 textarea 輸入框中是否輸入了某個特定關鍵字。這在表單驗證、內容過濾或即時搜尋提示等場景非常實用。本文將介紹幾種常見且高效的實現方式。

核心方法：使用 indexOf 或 includes

最直接的方式是取得 textarea 的值，然後使用字串的搜尋方法。以下是一個基於 jQuery 的經典範例：

if ($("#yourTextareaId").val().indexOf("目標字串") !== -1) {
    // 存在：執行操作 1
} else {
    // 不存在：執行操作 2
}

說明：

• $("#yourTextareaId").val()：獲取 textarea 的當前內容。
• indexOf("目標字串")：返回字串首次出現的索引，若不存在則返回 -1。
• 判斷條件 !== -1 即代表「包含該字串」。

現代寫法：includes() (ES6+)

若專案支援 ES6，可使用更語意化的 includes() 方法，程式碼更易讀：

const content = document.getElementById("yourTextareaId").value;
if (content.includes("目標字串")) {
    // 存在
} else {
    // 不存在
}

進階需求：不區分大小寫搜尋

若需忽略大小寫，可先統一轉為小寫再比對：

const content = document.getElementById("yourTextareaId").value.toLowerCase();
const keyword = "目標字串".toLowerCase();

if (content.includes(keyword)) {
    // 存在 (不區分大小寫)
}

正則表達式：靈活匹配

若需更複雜的匹配規則（如單字邊界、多關鍵字），可使用正則表達式：

const regex = /\b目標字串\b/i; // \b 為單字邊界, i 為不區分大小寫
if (regex.test(content)) {
    // 符合規則
}

總結

判斷 textarea 是否包含特定字，核心在於 取得值 → 字串尋 → 判斷結果 三步驟。現代開發建議優先使用 includes() 提高可讀性，配合 toLowerCase() 處理大小寫，複雜場景再引入正則表達式。記得根據專案瀏覽器相容性需求選擇適當語法。