怎么用正則表達(dá)式從HTML中匹配img標(biāo)簽的圖片地址

這篇文章主要介紹“怎么用正則表達(dá)式從HTML中匹配img標(biāo)簽的圖片地址”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“怎么用正則表達(dá)式從HTML中匹配img標(biāo)簽的圖片地址”文章能幫助大家解決問(wèn)題。

分析

每個(gè)網(wǎng)站中展示圖片的地方，無(wú)非就是img標(biāo)簽或者style中background-image和background，先解決img標(biāo)簽中的圖片。
首先，地址在標(biāo)簽的src屬性之中，所以找尋src的位置是必須的。但是不只有img標(biāo)簽擁有src屬性，video和style也同樣擁有src屬性。因此，只匹配src的位置是不夠，還得確保這個(gè)src的位置在img標(biāo)簽中。

然后，就是匹配src后面的地址，匹配地址的方法已經(jīng)有許多文章描述過(guò)了，不再多說(shuō)，但本文中用了一個(gè)比較取巧的方式去匹配。

總的思路就是先匹配src的位置，在獲取圖片地址。

正則表達(dá)式

• 首先是匹配src的位置，既然是找位置，那就需要用的正則表達(dá)式中預(yù)查(?)，因?yàn)樾枰膱D片地址是在src后面，所以用反向肯定預(yù)查，所以初步確定正則表達(dá)式可寫成:

/(?<=判斷條件)/ 至于反向肯定預(yù)查的判斷條件，就是在img之后的src，所以正則表達(dá)式改成如下： /(?<=(img src="))/ 之所以匹配src=", 是因?yàn)橄胍苯泳推ヅ涞降刂返拈_(kāi)頭位置，于是就順手加上。
但是，因?yàn)閕mg和src之間可能還存在class或者其他自定義屬性，所以還要加上這些可能存在字符的匹配。但是因?yàn)檫@些字符的種類比較多，如雙引號(hào)""，英文、數(shù)字、甚至是中文等等，一一匹配過(guò)于麻煩，有個(gè)取巧的方式就是匹配非>。
眾所周知，>在HTML中是一個(gè)標(biāo)簽的結(jié)尾，所以它不可能出現(xiàn)在img標(biāo)簽內(nèi)的img字符和src字符的中間，所以匹配位置的正則表達(dá)式可寫成: /(?<=(img[^>]*src="))/

可以看到，能夠成功找到圖片地址的開(kāi)頭位置。

• 既然位置找到了，那剩下的就是匹配地址了。這里可以使用其他相關(guān)文章說(shuō)的匹配地址的正則表達(dá)式，但是和上面一樣，同樣可以取巧。
  在HTML標(biāo)簽中，圖片地址是以雙引號(hào)"開(kāi)頭和結(jié)尾的，上面的匹配位置已經(jīng)匹配到圖片開(kāi)頭的雙引號(hào)之后，那么圖片地址還剩下一個(gè)雙引號(hào)，就是結(jié)尾的那個(gè)。
  那么，直接匹配所有連續(xù)不為"的字符不就可以了，思路可能有點(diǎn)復(fù)雜，但是寫起來(lái)簡(jiǎn)單：

/[^"]*/

• 因此，總的正則表達(dá)式為:

/(?<=(img[^>]*src="))[^"]*/g 結(jié)尾加個(gè)g是表示匹配所有符合條件的字符串，現(xiàn)在就可以匹配出圖片地址了：

關(guān)于“怎么用正則表達(dá)式從HTML中匹配img標(biāo)簽的圖片地址”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。