Добавить атрибут data-mfp-src в теги изображений PHP - PullRequest
Новая
       20

Добавить атрибут data-mfp-src в теги изображений PHP

0 голосов
/ 28 августа 2018

его содержание: 

<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));
}

1 Ответ

0 голосов
/ 06 сентября 2018

В качестве надежного средства выделения значения 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 но опять же, я не рекомендую это делать, потому что это может молча подвести вас в будущем.

...