JavaScript match() 方法：如何輕鬆處理字串匹配
更新日期： 2024 年 2 月 21 日
JavaScript 提供了豐富的方法來處理字串，其中 match() 方法是一個強大的工具，專門用於匹配字串中的特定模式。
無論你是在處理「使用者輸入驗證」、「分析數據」，還是簡單地對文字內容進行搜尋和擷取，match() 方法都能夠輕鬆應對。
本文將帶你深入了解 JavaScript 的 match() 方法，從基本使用方式到配合規則運算式進行複雜的匹配模式，再到實際的應用案例。
不論你是剛開始學習 JavaScript 或已經有一定的基礎，這篇文章都將為你提供實用的知識和技巧，幫助你有效地處理各種字串匹配的需求。
match() 方法概述
match() 方法是 JavaScript 中的一個字串物件的「方法」。
它接受一個規則運算式作為參數，並返回該規則運算式在字串中匹配的結果。
如果找到了匹配的文字，match() 方法將返回一個包含了匹配結果的陣列；如果沒有找到匹配的文本，則返回 null。
什麼是字串匹配？
「字串匹配」（Pattern matching）是指在一個字串中，尋找符合特定比對字串特徵的過程。
這個模式可以是一個具體的文字串，也可以是更複雜的模式：如「規則運算式」定義的模式。
語法結構
match() 方法的基本語法結構如下：
str.match(regexp)- str 是要被比對的原始字串。
- regexp 是一個規則運算式物件，用於指定要搜尋的模式。
基本功能
單一匹配
如果規則運算式不包含全局標誌（g），match() 方法將只搜尋第一個匹配的結果。
返回的陣列中除了包含匹配的文本外，還會包含有關匹配的額外資訊。
具體的匹配額外資訊包含：
簡單字串搜尋
假設你想要在一段文本中查找某個特定的單詞或者字串，match() 方法可以幫助你快速實現：
let text = "學習JavaScript是一個有趣的過程。";
let pattern = /JavaScript/;
let result = text.match(pattern);
console.log(result);
// 回傳陣列值
// [
// 'JavaScript',
// index: 2,
// input: '學習JavaScript是一個有趣的過程。',
// groups: undefined
// ]在這個例子中，我們尋找文本中的 “JavaScript”。如果匹配成功，match() 方法將返回一個陣列，包含了匹配的字串。若匹配不成功，則返回 null。
使用規則運算式進行匹配
match() 方法的真正強大之處，在於它能以規則運算式去比對字串，讓你能夠實現更複雜和靈活的匹配模式。
「規則運算式」的一大優勢是能夠定義捕獲組（capturing groups），以提取文本中的特定部分：
// 不使用捕獲組
let text = "聯繫電話是: 123-456-7890。";
let pattern = /\d{3}-\d{3}-\d{4}/;
let result = text.match(pattern);
console.log(result);
// 輸出：
// [
// '123-456-7890',
// index: 7,
// input: '聯繫電話是： 123-456-7890',
// groups: undefined
// ]// 使用捕獲組（或稱：匿名捕獲組）功能
let text = "聯繫電話是: 123-456-7890。";
let pattern = /(\d{3})-(\d{3})-(\d{4})/;
let result = text.match(pattern);
console.log(result);
// 輸出：
// [
// '123-456-7890',
// '123',
// '456',
// '7890',
// index: 7,
// input: '聯繫電話是： 123-456-7890',
// groups: undefined
// ]// 使用具名捕獲組功能
let text = "聯繫電話是: 123-456-7890。";
let pattern = /(?<name1>\d{3})-(?<name2>\d{3})-(?<name3>\d{4})/;
let result = text.match(pattern);
console.log(result);
// 輸出：
// [
// '123-456-7890',
// '123',
// '456',
// '7890',
// index: 7,
// input: '聯繫電話是: 123-456-7890。',
// groups: [Object: null prototype] {
// name1: '123',
// name2: '456',
// name3: '7890'
// }
// ]在這個例子中，我們可以發現具體來說，單一匹配包含的相關資訊包含：
- 完整匹配的文字：數組的第一個元素（索引為 0）是完整匹配到的字串。
- 捕獲組：如果規則運算式中包含了捕獲組（即圓括號內的子模式），則這些捕獲組的匹配結果會按照它們在規則運算式中出現的順序，作為數組的後續元素。每個捕獲組的匹配結果都是一個字串。
- index：代表匹配到的子字串，在原始字串中的起始位置（索引）。
- input：代表原始的字串。
- groups：在使用具名捕獲組（ES2018 引入的特性）時，groups 屬性將包含一個物件，其屬性名對應於捕獲組的名稱，屬性值為相應的匹配結果。
多個匹配：
如果規則運算式使用了全局標誌（g），match() 方法將搜尋並返回所有匹配的結果。
這時，返回的陣列只包含匹配的文本，而不包含額外的匹配資訊。
尋找所有匹配
如果你想要找到文本中所有匹配的結果，可以在規則運算式中使用全局搜尋標誌 g：
let text = "JavaScript 很有趣。學習 JavaScript 可以提高邏輯思維。";
let pattern = /JavaScript/g;
let results = text.match(pattern);
console.log(results);
// 輸出：
// [ 'JavaScript', 'JavaScript' ]這個例子將返回所有 “JavaScript” 的匹配結果，作為一個陣列返回。
注意事項
使用 match() 方法時，需要注意以下幾點：
- 如果規則運算式使用了全局標誌 g，則 match() 返回的陣列不會包含關於匹配位置，或是捕獲組的資訊。
- 如果沒有找到任何匹配結果，match() 將返回 null，因此在處理返回結果時，應該進行空值檢查。
- 規則運算式是一個強大但復雜的工具，需要時間學習和練習才能熟練掌握。
實際案例
案例一：表單數據驗證
在網頁表單中收集使用者資料時，驗證使用者輸入的數據格式非常重要。
使用 match() 方法，我們可以輕鬆驗證電子郵件地址、電話號碼等常見字段的格式。
function validateEmail(email) {
let pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return email.match(pattern) ? true : false;
}
let email = "user@example.com";
console.log(validateEmail(email));
// 輸出：
// true在這個例子中，我們建立了一個 validateEmail 函數，來驗證電子郵件地址的格式。
如果輸入的電子郵件地址，符合規則運算式定義的模式，函數將返回 true，否則返回 false。
案例二：擷取文字資料
在處理文字數據時，我們經常需要從中提取特定資料，例如從一段文字中取出所有的超連結或日期。
let text = "請訪問我們的網站：https://example.com。活動日期：2023-08-15。";
let urls = text.match(/https?:\/\/\w+\.\w+/g);
let dates = text.match(/\d{4}-\d{2}-\d{2}/g);
console.log(urls);
// 輸出：https://example.com
console.log(dates);
// 輸出：2023-08-15在這個例子中，我們使用 match() 方法配合規則運算式，來擷取文字中的網址和日期。這種方法非常適合於處理日誌文件、文字檔分析等場景。
案例三：文本分析與統計
match() 方法也可以用於文字分析，比如統計一篇文章中某個單詞出現的次數。
let text = "JavaScript 是一門非常有趣的語言。學習 JavaScript 可以開啟編程世界的大門。";
let pattern = /JavaScript/g;
let matches = text.match(pattern);
let count = matches ? matches.length : 0;
console.log(`'JavaScript' 一詞出現了 ${count} 次。`);
// 輸出：
// 'JavaScript' 一詞出現了 2 次。這個例子展示了如何使用 match() 方法和規則運算式，來計算一個特定單詞在文檔中出現的次數，從而進行簡單的文字分析。
案例四：語言處理
在進行自然語言處理或文本挖掘時，match() 方法可以幫助我們快速找出文檔中，符合特定模式的短語或句子，如提取含有特定關鍵詞的句子等。
let text = "JavaScript 是一門有趣的語言。它是網頁開發的核心。學好 JavaScript 非常重要。";
let sentences = text.match(/[^。]*JavaScript[^。]*。/g);
console.log(sentences);
// 輸出：
// [ 'JavaScript 是一門有趣的語言。', '學好 JavaScript 非常重要。' ]進階技巧
非貪婪匹配
在使用規則運算式進行匹配時，預設是貪婪匹配。
換句話說，規則運算式會嘗試匹配盡可能多的字串。使用非貪婪匹配，可以通過在量詞後添加 ? 實現。
這樣規則運算式會匹配盡可能少的字串，有助於提高匹配的精確度。
let text = "<div>文字內容一</div><div>文字內容二</div>";
let pattern = /<div>.*?<\/div>/; // 非貪婪匹配
let result = text.match(pattern);
console.log(result);
// 輸出：
// [
// '<div>文字內容一</div>',
// index: 0,
// input: '<div>文字內容一</div><div>文字內容二</div>',
// groups: undefined
// ]使用正向預查和負向預查
正向預查（lookahead）和負向預查（negative lookahead）是規則運算式中的進階特性，允許你在不消耗字串的情況下，對字串進行匹配條件的判斷。
- 正向預查：(?=…) 匹配接下來的字串滿足特定條件的位置。
- 負向預查：(?!…) 匹配接下來的字串不滿足特定條件的位置。
它們用途在於，當你需要匹配的文字後面必須跟有（或必須不跟有，如果是負向預查 (?!…)）某些特定的文字時，這種機制讓您能夠基於後續的文字條件，來進行精確的匹配。
而不需要將這些條件文字，包含進匹配結果內。
let text = "我愛JavaScript30，但不是JavaScript20。";
let pattern = /JavaScript(?=30)/; // 正向預查
let results = text.match(pattern);
console.log(results);
// 輸出：
// [
// 'JavaScript',
// index: 2,
// input: '我愛JavaScript30，但不是JavaScript20。',
// groups: undefined
// ]規則運算式 /JavaScript(?=30)/ 中的 (?=30) 部分是一個正向預查，它表示匹配「跟在 “JavaScript” 後面的是 “30”」的情況。
正向預查僅僅檢查條件是否滿足，並不會將 “30” 這部分文字包含在最終的匹配結果中。
因此，當 match() 方法找到 “JavaScript30” 這個字串時，它只會返回 “JavaScript”，因為 “30” 僅被用作檢查條件，並不包含在匹配結果中。
結論
本文深入探索了 JavaScript 的 match() 方法，從基本使用到實際應用案例，再到進階技巧和注意事項。
我們可以看到，match() 方法不僅是處理字串和規則運算式的強大工具，更是開發者在日常開發中不可或缺的助手。
無論是進行表單驗證、數據提取，還是文字分析，match() 方法都能提供靈活和高效的方法。