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.

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

报告相同问题？

悬赏问题

  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 unity第一人称射击小游戏，有demo，在原脚本的基础上进行修改以达到要求
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）