深入探究非貪婪匹配

一、正則表達式的基礎知識

正則表達式（Regular expression，簡稱regex）是一種對字符串進行匹配和操縱的文字表達式。正則表達式的語法規則非常豐富和複雜，但是它是一項很有用的技能，可以用於多個領域。

在正則表達式中，每一個字符都表示特定的含義或操作。例如，$、^、*、+、?、{}、[]等符號都具有特定的含義，代表着不同的匹配規則和方式。正則表達式可以用來匹配文本中的特定模式，例如電話號碼、電子郵件、網址等。

// 示例代碼
// 匹配任意數字和字母的組合
let reg = /^[A-Za-z0-9]+$/

// 匹配手機號
let phoneReg = /^1[3|4|5|7|8]\d{9}$/

// 匹配電子郵件
let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

二、貪婪匹配和非貪婪匹配

在正則表達式中，*、+、?、{}等量詞符號都是貪婪匹配的。這意味着，它們會儘可能地匹配更多的字符。例如，代碼中的*會匹配到儘可能多的任意字符。在匹配手機號時，可能會出現多餘的字符被匹配的情況。

非貪婪匹配是解決貪婪匹配問題的一種方式。在正則表達式中，使用?符號可以創建一個非貪婪匹配。例如，*?、+?、??、{m,n}?等都可以實現非貪婪匹配。

非貪婪匹配會匹配儘可能少的字符。例如，在匹配手機號時，使用非貪婪匹配可以避免匹配多餘的字符。

// 示例代碼
// 貪婪匹配
let str = '1234567890'
let reg = /\d{3,5}/g
console.log(str.match(reg)) // ["12345", "67890"]

// 非貪婪匹配
let str2 = '1234567890'
let reg2 = /\d{3,5}?/g
console.log(str2.match(reg2)) // ["123", "456", "789", "0"]

三、非貪婪匹配的運用場景

非貪婪匹配可以用於多個場景，例如：

1. HTML標籤匹配

在HTML文件中，經常需要獲取單個標籤的匹配結果。使用非貪婪匹配可以避免匹配到多餘的標籤，提取到正確的結果。

// 示例代碼
let htmlStr = '<div><p>這是一個段落</p></div>'
let reg = /<(.*?)>/g
console.log(htmlStr.match(reg)) // ["<div>", "<p>", "</p>", "</div>"]

2. URL中的參數匹配

在URL中，經常需要獲取參數值。使用非貪婪匹配可以避免匹配到多餘的字符，提取到正確的參數值。

// 示例代碼
let url = 'http://example.com?id=123&name=Tom&age=20'
let reg = /(\w+)=(.*?)(?:&|$)/g
let result = {}
let temp = null
while ((temp = reg.exec(url)) !== null) {
  result[temp[1]] = temp[2]
}
console.log(result) // {id: "123", name: "Tom", age: "20"}

3. 多行文本匹配

在匹配多行文本時，需要使用非貪婪匹配，避免匹配到多餘的內容。

// 示例代碼
let str = 'Hello\nWorld\nBye'
let reg = /^.*$/gm
console.log(str.match(reg)) // ["Hello", "World", "Bye"]

let str2 = 'Hello\nWorld\nBye'
let reg2 = /^.*?$/gm
console.log(str2.match(reg2)) // ["H", "e", "l", "l", "o", "W", "o", "r", "l", "d", "B", "y", "e"]

四、總結

非貪婪匹配在正則表達式中非常重要，可以用於多個場景，解決貪婪匹配的問題。在開發過程中，需要根據實際情況選擇使用貪婪匹配或非貪婪匹配。