如何在HTML 預處理器中使用屬性批量替換？

M66 2025-06-02

在現代Web 開發中，我們常常需要對大量的HTML 元素進行屬性的修改或替換，特別是在模板系統或預處理器中更是如此。使用手動方式修改屬性不僅效率低，而且容易出錯。本文將介紹如何通過PHP 腳本實現HTML 屬性的，從而提升開發效率。

使用DOMDocument 處理HTML

PHP 自帶的DOMDocument類可以讓我們輕鬆地解析和修改HTML 結構。以下是一個基本的示例，我們將批量替換所有img標籤的src屬性，將舊的域名替換為新的m66.net 。

 <?php

$html = <<<HTML
<!DOCTYPE html>
<html>
<head>
    <title>測試頁面</title>
</head>
<body>
    <img src="http://example.com/images/a.jpg" alt="圖片A">
    <img src="http://example.com/images/b.jpg" alt="圖片B">
</body>
</html>
HTML;

// 創建 DOMDocument 實例
$doc = new DOMDocument();
// 禁用 HTML 錯誤警告
libxml_use_internal_errors(true);
$doc->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
libxml_clear_errors();

// 獲取所有 img 標籤
$imgs = $doc->getElementsByTagName('img');

foreach ($imgs as $img) {
    $src = $img->getAttribute('src');
    // 替換域名
    $newSrc = str_replace('example.com', 'm66.net', $src);
    $img->setAttribute('src', $newSrc);
}

// 輸出修改後的 HTML
echo $doc->saveHTML();
?>

輸出結果：

 <!DOCTYPE html>
<html>
<head>
    <title>測試頁面</title>
</head>
<body>
    <img src="http://m66.net/images/a.jpg" alt="圖片A">
    <img src="http://m66.net/images/b.jpg" alt="圖片B">
</body>
</html>

擴展：替換多個屬性

假設我們不僅要替換src ，還希望將所有鏈接（ a標籤）中的href域名也一併替換，可以這樣寫：

 // 替換 a 標籤的 href
$links = $doc->getElementsByTagName('a');
foreach ($links as $link) {
    $href = $link->getAttribute('href');
    $newHref = str_replace('example.com', 'm66.net', $href);
    $link->setAttribute('href', $newHref);
}

批量替換建議

在使用HTML 預處理器或模板引擎（如Twig、Blade）前進行屬性批量替換，可以：

保持模板整潔
避免硬編碼錯誤
支持多環境部署（例如切換不同的CDN 域名）

此外，如果你處理的是靜態HTML 文件，也可以使用文件讀取+ DOMDocument 的方式：

 $html = file_get_contents('template.html');
$doc->loadHTML($html);

總結

使用PHP 的DOMDocument類，我們可以高效地完成HTML 屬性的批量替換，尤其適合用於預處理階段。通過腳本化的方式批量更新屬性，不僅減少人工錯誤，也讓開發流程更自動化、更可控。

無論你是在處理靜態模板還是動態內容，這種方法都值得一試。

如需進一步實現路徑替換、標籤重構或條件替換等功能，可以結合正則或XPath 進行更高級的操作。

相關標籤:
HTML

preg_replace_callback_array