duanqinqiao4844 2018-08-28 14:31
浏览 87
已采纳

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

his is the content:

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

I want to use preg_replace to add data-mfp-src attribute (getting the value from the src attribute) to be the final code like this:

<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>

This is my code and it's working without any issues but i want to use preg_replcae for some specific reasons:

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条回答 默认 最新

  • doutun9179 2018-09-06 01:10
    关注

    As a robust means of isolating the src value and setting the new attribute to this value, I'll urge you to avoid regex. Not that it can't be done, but that my snippet to follow won't break if more classes are added to the <div> nor if the <img> attributes are shifted around.

    Code: (Demo)

    $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();

    Output:

    <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>

    Resources:

    Just to show you what the regex might look like...

    Find: ~<img src="([^"]*)"~

    Replace: <img src="$1" data-mfp-src="$1"

    Demo: https://regex101.com/r/lXIoFw/1 but again, I don't recommend it because it could silently let you down in the future.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 魔霸ROG7 pro,win11.息屏后会显示黑屏,如图，如何解决？(关键词-重新启动)
  • ¥15 有没有人知道这是哪里出了问题啊？要怎么改呀？
  • ¥200 C++表格文件处理-悬赏
  • ¥15 Windows Server2016本地登录失败
  • ¥15 复合卡卡号轨道写入芯片卡
  • ¥20 基于MATLAB的TDOA
  • ¥15 为啥输入字体突然变了
  • ¥20 已知坐标，换成MATLAB可以用的数据
  • ¥15 这个python五子棋代码的每一句意思是什么啊
  • ¥15 求一段隐藏代码，隐藏一些内容