Java 與 JavaScript 過濾 HTML 中 img 標籤的實現方案

需求背景

在富文本編輯、內容安全過濾等場景中，常需從 HTML 字符串中移除 <img> 標籤以防止圖片顯示或 XSS 風險。本文提供 Java 與 JavaScript 兩種語言的正則實現方案。

JavaScript 實現

<script type="text/javascript">
var htmlContent = "<div id='test'><img src='aaa' height='4' width='4'></img><img src='ff' width='44' height='444' /></div>";

// 過濾 <img></img> 形式
var data = htmlContent.replace(/<img.*>.*<\/img>/ig, "");
// 過濾 <img /> 自閉合形式
data = data.replace(/<img.*\/>/ig, "");

alert(data); // 輸出: <div id='test'></div>
</script>

Java 實現

public class TestRegex {
    public static void main(String[] args) {
        String html = "<div id='test'><img src='aaa' height='4' width='4'></img><img src='ff' width='44' height='444' /></div>";

        String destStr = html.replaceAll("<img.*>.*</img>", "")
                             .replaceAll("<img.*/>", "");

        System.out.println(destStr); // 輸出: <div id='test'></div>
    }
}

正則表達式解析

⚠️ 局限性與改進建議

• 貪婪匹配風險：.* 會匹配盡可能多字符，若 HTML 中包含多個 img 標籤或巢狀結構，可能誤刪。建議使用非貪婪模式 .*?。
• 屬性值含尖括號：若屬性值包含 > 字符，正則會失效。
• 推薦方案：生產環境建議使用成熟的 HTML 解析庫（如 Java 的 Jsoup、JS 的 DOMParser），按 DOM 樹操作移除節點，更安全可靠。

Jsoup 示例 (Java)

String cleanHtml = Jsoup.parse(html)
    .select("img").remove()
    .html();

總結

正則方案適合簡單、可控的場景快速原型；複雜或安全敏感場景請務必使用專業 HTML 解析器。