JavaScript match() 方法:如何輕鬆處理字串匹配

更新日期: 2024 年 9 月 14 日

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'
//   }
// ]

在這個例子中,我們可以發現具體來說,單一匹配包含的相關資訊包含:

  1. 完整匹配的文字:數組的第一個元素(索引為 0)是完整匹配到的字串。
  2. 捕獲組:如果規則運算式中包含了捕獲組(即圓括號內的子模式),則這些捕獲組的匹配結果會按照它們在規則運算式中出現的順序,作為數組的後續元素。每個捕獲組的匹配結果都是一個字串。
  3. index:代表匹配到的子字串,在原始字串中的起始位置(索引)。
  4. input:代表原始的字串。
  5. 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() 方法都能提供靈活和高效的方法。

Similar Posts