时间戳

首页 > 解决方案 > 将 data-mfp-src 属性添加到图像标签 PHP

php - 将 data-mfp-src 属性添加到图像标签 PHP

问题描述

他的内容是：

<div class="image">
   <img src="https://www.gravatar.com/avatar/" alt="test" width="50" height="50">
</div>

我想使用preg_replace添加data-mfp-src属性（从属性中获取值src）成为这样的最终代码：

<div class="image">
   <img src="https://www.gravatar.com/avatar/" data-mfp-src="https://www.gravatar.com/avatar/" alt="test" width="50" height="50">
</div>

这是我的代码，它的工作没有任何问题，但我想使用 preg_replcae 出于某些特定原因：

function lazyload_images( $content ){
    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");

    $dom = new DOMDocument;
    libxml_use_internal_errors(true);
    @$dom->loadHTML($content);
    libxml_use_internal_errors(false);

    $xpath = new DOMXPath($dom);
    foreach ($xpath->evaluate('//div[img]') as $paragraphWithImage) {
        //$paragraphWithImage->setAttribute('class', 'test');
        foreach ($paragraphWithImage->getElementsByTagName('img') as $image) {
            $image->setAttribute('data-mfp-src', $image->getAttribute('src'));
            $image->removeAttribute('src');
        }
    };

    return preg_replace('~<(?:!DOCTYPE|/?(?:html|head|body))[^>]*>\s*~i', '', $dom->saveHTML($dom->documentElement));
}

标签： phpxpathpreg-replacedomdocumentattr

解决方案

作为隔离src值并将新属性设置为此值的可靠方法，我会敦促您避免使用正则表达式。并不是说它不能完成，而是如果将更多类添加到<div>或者<img>属性被转移，我要遵循的片段不会中断。

代码：（演示）

$html = <<<HTML
<div class="image">
   <img src="https://www.gravatar.com/avatar/" alt="test" width="50" height="50">
</div>
HTML;

$dom = new DOMDocument; 
$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
// using a loop in case there are multiple occurrences
foreach ($xpath->query("//div[contains(@class, 'image')]/img") as $node) {
    $node->setAttribute('data-mfp-src', $node->getAttribute('src'));
}
echo $dom->saveHTML();

输出：

<div class="image">
   <img src="https://www.gravatar.com/avatar/" alt="test" width="50" height="50" data-mfp-src="https://www.gravatar.com/avatar/">
</div>

资源：

只是为了向您展示正则表达式的外观......

寻找：~<img src="([^"]*)"~

代替：<img src="$1" data-mfp-src="$1"

演示：https ://regex101.com/r/lXIoFw/1 但同样，我不推荐它，因为它可能会在未来默默地让你失望。

推荐阅读