使用正則表達式從html代碼中提取第一個圖像源？

Question

我想知道如何實現這一目標。

假設：有很多包含表格，div，圖像等的html代碼。

問題：如何獲得所有出現的匹配。 更重要的是，具體來說，我如何獲得img標記源（src =？）。

例：

<img src="http://example.com/g.jpg" alt="" />

在這種情況下，如何打印http://example.com/g.jpg 。 我想假設在我提到的html代碼中還有其他標簽，可能還有多個圖像。 是否有可能在html代碼中擁有所有圖像源的數組？

我知道這可以通過正則表達式實現，但我無法理解它。

任何幫助是極大的贊賞。

Answer 1

雖然正則表達式可以適用於各種各樣的任務，但我發現在解析HTML DOM時通常會出現問題。 HTML的問題在於，文檔的結構變化很大，難以准確（並且准確地說，我的意思是100％的成功率，沒有誤報）提取標簽。

我建議你做的是使用一個DOM解析器，如SimpleHTML並使用它：

function get_first_image($html) {
    require_once('SimpleHTML.class.php')

    $post_html = str_get_html($html);

    $first_img = $post_html->find('img', 0);

    if($first_img !== null) {
        return $first_img->src;
    }

    return null;
}

有些人可能認為這樣做太過分了，但最終，維護起來會更容易，並且可以提供更多的可擴展性。 例如，使用DOM解析器，我也可以獲取alt屬性。

可以設計一個正則表達式來實現相同的目標，但是會限制它強制alt屬性在src或相反的方式，並且克服這個限制會增加正則表達式的復雜性。

另外，請考慮以下內容。 要使用正則表達式正確匹配<img>標記並僅獲取src屬性（在第2組中捕獲），您需要以下正則表達式：

<\s*?img\s+[^>]*?\s*src\s*=\s*(["'])((\\?+.)*?)\1[^>]*?>

如果出現以下情況，上述情況可能會失敗：

• 屬性或標記名稱為大寫，並且不使用i修飾符。
• src屬性周圍沒有使用引號。
• 然后src另一個屬性在其值的某處使用>字符。
• 我沒有預料到的其他一些原因。

因此，再次，不要使用正則表達式來解析dom文檔。

---

編輯：如果你想要所有的圖像：

function get_images($html){
    require_once('SimpleHTML.class.php')

    $post_dom = str_get_dom($html);

    $img_tags = $post_dom->find('img');

    $images = array();

    foreach($img_tags as $image) {
        $images[] = $image->src;
    }

    return $images;
}

Answer 2

使用這個，更有效：

preg_match_all('/<img [^>]*src=["|\']([^"|\']+)/i', $html, $matches);
foreach ($matches[1] as $key=>$value) {
    echo $value."<br>";
}

例：

$html = '
<ul>     
  <li><a target="_new" href="http://www.manfromuranus.com">Man from Uranus</a></li>       
  <li><a target="_new" href="http://www.thevichygovernment.com/">The Vichy Government</a></li>      
  <li><a target="_new" href="http://www.cambridgepoetry.org/">Cambridge Poetry</a></li>      
  <img width="190" height="197" border="0" align="right" alt="upload.jpg" title="upload.jpg" class="noborder" src="value1.jpg" />
  <li><a href="http://www.verot.net/pretty/">Electronaut Records</a></li>      
  <img width="190" height="197" border="0" align="right" alt="upload.jpg" title="upload.jpg" class="noborder" src="value2.jpg" />
  <li><a target="_new" href="http://www.catseye-crew.com">Catseye Productions</a></li>     
  <img width="190" height="197" border="0" align="right" alt="upload.jpg" title="upload.jpg" class="noborder" src="value3.jpg" />
</ul>
<img width="190" height="197" border="0" align="right" alt="upload.jpg" title="upload.jpg" class="noborder" src="res/upload.jpg" />
  <li><a target="_new" href="http://www.manfromuranus.com">Man from Uranus</a></li>       
  <li><a target="_new" href="http://www.thevichygovernment.com/">The Vichy Government</a></li>      
  <li><a target="_new" href="http://www.cambridgepoetry.org/">Cambridge Poetry</a></li>      
  <img width="190" height="197" border="0" align="right" alt="upload.jpg" title="upload.jpg" class="noborder" src="value4.jpg" />
  <li><a href="http://www.verot.net/pretty/">Electronaut Records</a></li>      
  <img src="value5.jpg" />
  <li><a target="_new" href="http://www.catseye-crew.com">Catseye Productions</a></li>     
  <img width="190" height="197" border="0" align="right" alt="upload.jpg" title="upload.jpg" class="noborder" src="value6.jpg" />
';   
preg_match_all('/<img .*src=["|\']([^"|\']+)/i', $html, $matches);
foreach ($matches[1] as $key=>$value) {
    echo $value."<br>";
} 

輸出：

value1.jpg
value2.jpg
value3.jpg
res/upload.jpg
value4.jpg
value5.jpg
value6.jpg

Answer 3

這對我有用：

preg_match('@<img.+src="(.*)".*>@Uims', $html, $matches);
$src = $matches[1];

Answer 4

我假設你的所有src =都有“圍繞網址

<img[^>]+src=\"([^\"]+)\"

這里發布的其他答案會對您的代碼做出其他的答案

Answer 5

我同意Andrew Moore的觀點。 使用DOM要好得多。 HTML DOM圖像集合將返回對所有圖像對象的引用。

讓我們在你的標題中說，

<script type="text/javascript">
    function getFirstImageSource()
    {
        var img = document.images[0].src;
        return img;
    }
</script>

然后在你的身體里，

<script type="text/javascript">
  alert(getFirstImageSource());
</script>

這將返回第一個圖像源。 你也可以沿着它們的方向循環它們（在頭部）

function getAllImageSources()
    {
        var returnString = "";
        for (var i = 0; i < document.images.length; i++)
        {
            returnString += document.images[i].src + "\n"
        }
        return returnString;
    }

（在體內）

<script type="text/javascript">
  alert(getAllImageSources());
</script>

如果您使用JavaScript執行此操作，請記住您無法在標題中的圖像集合中循環運行函數。 換句話說，你不能做這樣的事情，

<script type="text/javascript">
    function getFirstImageSource()
    {
        var img = document.images[0].src;
        return img;
    }
    window.onload = getFirstImageSource;  //bad function

</script>

因為這不行。 執行標頭時未加載圖像，因此您將獲得null結果。

希望這可以在某種程度上有所幫助。 如果可能的話，我會使用DOM。 你會發現你已經完成了大量的工作。

Answer 6

我不知道你是否必須使用正則表達式來獲得結果。 如果沒有，您可以嘗試使用simpleXML和XPath，這對您的目標來說更可靠：

首先，將HTML導入DOM文檔對象。 如果您收到錯誤，請關閉此部分的錯誤，並確保之后重新打開它們：

 $dom = new DOMDocument();
 $dom -> loadHTMLFile("filename.html");

接下來，將DOM導入simpleXML對象，如下所示：

 $xml = simplexml_import_dom($dom);

現在，您可以使用一些方法將所有圖像元素（及其屬性）放入數組中。 XPath是我喜歡的，因為我用它遍歷DOM會有更好的運氣：

 $images = $xml -> xpath('//img/@src');

此變量現在可以像圖像URL的數組一樣對待：

 foreach($images as $image) {
    echo '<img src="$image" /><br />
    ';
  }

Presto，你的所有圖像，沒有脂肪。

這是上面的非注釋版本：

---

 $dom = new DOMDocument();
 $dom -> loadHTMLFile("filename.html");

 $xml = simplexml_import_dom($dom);

 $images = $xml -> xpath('//img/@src');

 foreach($images as $image) {
    echo '<img src="$image" /><br />
    ';
  }

Answer 7

我真的認為你不能用正則表達式預測所有的情況。

最好的方法是使用帶有PHP5類DOMDocument和xpath的DOM。 這是做你想做的最干凈的方法。

$dom = new DOMDocument();
$dom->loadHTML( $htmlContent );
$xml = simplexml_import_dom($dom);
$images = $xml -> xpath('//img/@src');

Answer 8

你可以試試這個：

preg_match_all("/<img\s+src=\"(.+)\"/i", $html, $matches);
foreach ($matches as $key=>$value) {
    echo $key . ", " . $value . "<br>";
}

Answer 9

既然你不擔心驗證HTML，你可能首先嘗試在文本上使用strip_tags（）來清除大部分內容。

然后你可以搜索像這樣的表達式

"/\<img .+ \/\>/i"

反斜杠會轉義特殊字符，如<，>，/。 。+堅持img標簽中有任何一個或多個字符您可以通過在括號周圍加上括號來捕獲部分表達式。 例如（。+）捕獲img標簽的中間部分。

當您確定要特定捕獲的中間部分時，可以將（。+）修改為更具體的內容。

Answer 10

<?php    
/* PHP Simple HTML DOM Parser @ http://simplehtmldom.sourceforge.net */

require_once('simple_html_dom.php');

$html = file_get_html('http://example.com');
$image = $html->find('img')[0]->src;

echo "<img src='{$image}'/>"; // BOOM!

PHP簡單的HTML DOM解析器將在幾行代碼中完成工作。