Javascript是一種動態語言，適用于瀏覽器端的開發。常用于驗證表單、操作DOM和Ajax請求。而在其中一個功能之中，正則取匹配img，非常值得探討。今天我就來簡單分享一下相關方法以及應用實例。 在前端開發中，經常需要獲取圖片的地址來進行一些操作，例如圖片展示、圖片上傳和圖片下載等等。如果手動一個一個搜索并復制粘貼，無疑是十分低效和枯燥的。所以我們需要一種自動匹配的方法來獲取所有的圖片地址。 正則取匹配img的方法，即通過正則表達式來匹配頁面中所有的圖片地址。相關方法常見的有兩種，分別是match()和exec()方法。下面我們就來逐一介紹這兩種方法。 1. match()方法 match()方法可用于字符串匹配，返回的是具有匹配的字符串數組。該方法常常與正則表達式一起使用。如果字符串與正則表達式匹配成功，該方法將返回一個數組，數組中的元素是輸入字符串（input）中與正則表達式相匹配的部分。如果沒有找到任何匹配項，則返回null。 舉個例子，我們可以這樣匹配所有的圖片地址：

var str = ''
document.querySelectorAll('img').forEach(function(item){
str += item.outerHTML
})
str.match(/]*>/g).map(function(item){
return item.match(/http(.+?)\.(jpg|gif)/)[0]
})

在這段代碼中，首先通過querySelectorAll獲取了頁面中所有的img標簽并拼接成一個字符串，然后使用match()方法通過正則表達式匹配所有的圖片地址。最后再通過map()方法格式化返回的數組。 2. exec()方法 exec()方法同樣也可用于字符串匹配，但是返回的是匹配到的所有結果，以及匹配的子串信息。該方法則是通過傳入文本或字符串，按照正則表達式匹配字符串，如果匹配成功則返回一個數組，數組中的元素是輸入字符串中與正則表達式相匹配的所有部分。如果沒有找到任何匹配項，則返回null。 繼續上方的例子，我們通過exec()方法實現圖片匹配：

var str = ''
document.querySelectorAll('img').forEach(function(item){
str += item.outerHTML
})
var reg = /http(.+?)\.(jpg|gif)/g
var result
var arr = []
while ((result = reg.exec(str)) !== null) {
arr.push(result[0])
}

同樣使用querySelectorAll獲取所有的img標簽，并拼接成一個字符串。接著使用正則表達式匹配，最后通過while循環把所有匹配到的內容push到一個數組中。 以上就是正則取匹配img的兩種常見方法了。如果你需要獲取頁面上的所有圖片地址，可以直接使用上述方法。同時需要注意的是，獲取頁面上的圖片地址是一種常見的技巧，我們應當學會使用并學習更多相關知識，擴展自己的能力。 小結 正則取匹配img是前端開發中十分實用的方法。通過正則表達式，可以自動化獲取到所有的圖片地址，極大地提高了我們的開發效率。上述文章中，我們介紹了兩種方式，即match()方法和exec()方法。讀者可根據實際應用場景，靈活選擇不同的方法。