его содержание:
<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));
}
В качестве надежного средства изоляции 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 но опять же, я не рекомендую это, потому что это может молча подвести вас в будущем.
Других решений пока нет …