您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 相關知識

PHP 從文章內容提取第一張圖片的多種實現方式

編輯：PHP 相關知識

PHP 從文章內容提取第一張圖片的多種實現方式

在 CMS、部落格、商品列表中，常需自動抓取內文第一張圖作為縮圖。本文整理四種正則寫法，並提供預設圖片 fallback 機制。

方法一：兩階段正則（先抓 img 標籤，再抓 src）

$content = $article['content'];

// 階段 1：匹配所有  標籤（自閉合或雙標籤）
$imgTagPattern = '~]+>~i';
preg_match_all($imgTagPattern, $content, $matches);
$allImages = $matches[0];

if (!empty($allImages)) {
    // 階段 2：從第一個 img 標籤提取 src
    $srcPattern = '/src=["\']([^"\']+\.(?:jpg|jpeg|gif|png|webp))["\']/i';
    preg_match($srcPattern, $allImages[0], $srcMatch);
    $firstImg = $srcMatch[1] ?? null;
}

echo $firstImg ? "" : "無圖片";

方法二：單一正則直接捕獲 src（效率較好）

$pattern = '/]+src=["\']([^"\']+\.(?:jpg|jpeg|gif|png|webp))["\'][^>]*>/i';
preg_match($pattern, $content, $match);
$firstImg = $match[1] ?? 'images/nopic.jpg'; // 預設圖
echo $firstImg;

方法三：支援單引號、雙引號、無引號的健壯版

$pattern = '/]*src\s*=\s*["\']?([^"\'>\s]+\.(?:jpg|jpeg|gif|png|webp))["\']?/i';
preg_match($pattern, $content, $match);
$firstImg = $match[1] ?? 'images/nopic.jpg';

方法四：使用 DOMDocument（最標準、最穩健）

libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->loadHTML('' . $content); // 修正編碼
libxml_clear_errors();

$images = $dom->getElementsByTagName('img');
$firstImg = 'images/nopic.jpg';

foreach ($images as $img) {
    $src = $img->getAttribute('src');
    if ($src && preg_match('/\.(jpg|jpeg|gif|png|webp)$/i', $src)) {
        $firstImg = $src;
        break;
    }
}
echo $firstImg;

效能與選擇建議

方法	優點	缺點	建議場景
正則兩階段	邏輯清晰	效能較差，兩次掃描	教學、簡單專案
單一正則	速度快	正則複雜，難維護	高流量、格式固定
DOMDocument	標準、容錯高、支援巢狀/屬性順序不固定	記憶體較大、稍慢	內容來源不可控、企業級專案

完整封裝函式範例

function getFirstImage(string $html, string $default = 'images/nopic.jpg'): string {
    // 優先用 DOMDocument
    if (extension_loaded('dom')) {
        libxml_use_internal_errors(true);
        $dom = new DOMDocument();
        $dom->loadHTML('' . $html);
        foreach ($dom->getElementsByTagName('img') as $img) {
            $src = $img->getAttribute('src');
            if ($src && preg_match('/\.(jpg|jpeg|gif|png|webp)$/i', $src)) {
                return $src;
            }
        }
    }
    // Fallback 正則
    if (preg_match('/]*src\s*=\s*["\']?([^"\'>\s]+\.(?:jpg|jpeg|gif|png|webp))["\']?/i', $html, $m)) {
        return $m[1];
    }
    return $default;
}

根據專案規模與內容來源選擇適合方案，並務必加上預設圖片，避免版面崩壞。