如何用PHP提取并替换HTML元素background-image中的图片URL？

你当前的问题在于DOMXPath::query()方法仅用于查询节点集合，无法直接返回字符串截取后的结果。要提取style属性里的图片URL并替换，需要改用DOMXPath::evaluate()方法执行XPath字符串函数，再更新节点属性。

步骤1：提取原有图片URL #

通过evaluate()执行XPath字符串截取逻辑，获取style属性中的图片地址：

$domDocument = new DOMDocument();
// 屏蔽HTML解析时的警告（处理不规范标签）
libxml_use_internal_errors(true);
$domDocument->loadHTML($article["DESCRIPTION"]);
libxml_clear_errors();

$domXPath = new DOMXPath($domDocument);

// 截取style属性中的图片URL
$oldUrl = $domXPath->evaluate("substring-before(substring-after(//div[@class='article__img has-caption']/@style, 'background-image: url(\''), '\')')");

步骤2：替换URL并更新节点属性 #

拿到原有URL后替换为目标地址，再重新拼接style属性赋值给div节点：

if ($oldUrl) {
    // 替换为webp格式地址
    $newUrl = str_replace('.png', '.webp', $oldUrl);
    // 获取目标div节点集合
    $divNodes = $domXPath->query("//div[@class='article__img has-caption']");
    if ($divNodes->length > 0) {
        $div = $divNodes->item(0);
        // 更新style属性
        $div->setAttribute('style', "background-image: url('{$newUrl}')");
    }
}

// 输出修改后的HTML
$updatedHtml = $domDocument->saveHTML();

完整代码示例 #

$domDocument = new DOMDocument();
libxml_use_internal_errors(true);
$domDocument->loadHTML($article["DESCRIPTION"]);
libxml_clear_errors();

$domXPath = new DOMXPath($domDocument);

// 提取原有图片URL
$oldUrl = $domXPath->evaluate("substring-before(substring-after(//div[@class='article__img has-caption']/@style, 'background-image: url(\''), '\')')");

if ($oldUrl) {
    // 替换URL
    $newUrl = str_replace('.png', '.webp', $oldUrl);
    // 获取目标div节点
    $divNodes = $domXPath->query("//div[@class='article__img has-caption']");
    if ($divNodes->length > 0) {
        // 循环处理所有匹配的div节点（如果有多个）
        foreach ($divNodes as $div) {
            $div->setAttribute('style', "background-image: url('{$newUrl}')");
        }
    }
}

// 获取修改后的HTML内容
$updatedDescription = $domDocument->saveHTML();

补充说明 #

• 如果页面存在多个符合class的div节点，代码中的循环会批量处理所有匹配项。
• libxml_use_internal_errors(true)用于避免HTML结构不规范时抛出的解析警告。

内容的提问来源于stack exchange，提问作者Viacheslav Ravdin