用php替换img到background-image div

Question

有没有办法用下面的div标签替换img标签？

原创html:

<div class="article">
  <img src="/images/img-1.jpg" alt="alt for image">
</div>

替换为html:

<div class="article">
 <div style="background: transparent url(/images/img-1.jpg) no-repeat;
 background-position: center center; background-size: cover; width: 566px; 
 height: 576px;">alt for image</div>
</div>

(可选)也可以使用父div中的宽度和高度,即我的示例中的文章类而不是定义固定的width: 566px; height: 576px;？

如果可能,我想使用该str_replace功能.

str_replace('?????', '?????', $article);

编辑:

可能有多个带有类文章的元素,并且文章类div中可能还有其他元素,我需要将img更改为div.

EDIT2:

我的意思是好像我可能在文章div中有任何内容,只是想用div替换img.

我可能有:

<div class="article">
  <h1>heading</h1>
  <p>paragraph</p>
  <img src="/images/img-1.jpg" alt="alt for image">
</div>

或者我可能有:

<div class="article">
  <h3>heading</h3>
  <p><img src="/images/img-1.jpg" alt="alt for image"> some paragraph </p>
</div>

所以,我可能在.articlediv中有任何东西,我想从中将img替换为div

从:

<img src="/images/img-1.jpg" alt="alt for image" here-may-be-another-attribute-too>

至:

<div style="background: transparent url(/images/img-1.jpg) no-repeat;">alt for image</div>

Answer 1

使用php-class simplehtmldom(http://simplehtmldom.sourceforge.net/),您可以使用类似CSS的选择器查找和修改HTML-Dom.

<?php
require_once('simple_html_dom.php');

// Create DOM from string
$html = str_get_html('<div class="article">
  <img src="/images/img-1.jpg" alt="alt for image">
</div>');

$html->find('div.article', 0)->innertext = '<div style="background: transparent url(/images/img-1.jpg) no-repeat;
 background-position: center center; background-size: cover; width: 566px; 
 height: 576px;">alt for image</div>';

/** 
 * Output: <div id="article"><div style="background: transparent url(/images/img-1.jpg) no-repeat;
 * background-position: center center; background-size: cover; width: 566px; 
 * height: 576px;">alt for image</div></div>
 */
echo $html; 
?>

Answer 2

您可以使用PHP的本机DOM库来查找和替换html.我写了一些例子,你适应你的情况.希望有所帮助

更新的代码:

$html_str = '<div class="article newclass" id="some_id">
  <h1>heading</h1>
  <p>paragraph</p>
  <img src="images/image.png" alt="alt for image">
  <br>
  <h3>
  <p>paragraph</p>
    <img src="images/image2.png" alt="alt for image3">
  </h3>
  </div>';

$dom = new DOMDocument();
$dom->loadHTML($html_str);
$xpath = new DOMXpath($dom);

foreach ($xpath->query('//div[contains(@class, "article")]//img') as $img) {

  $new_img = replace($img, $width = '566', $height = '576');

  $replacement = $dom->createDocumentFragment();
  $replacement->appendXML($new_img);

  $img->parentNode->replaceChild($replacement, $img);

}

$new_html = $dom->saveXml();
echo $new_html;

function replace($img, $width, $height) {

  $href = $img->getAttribute('src');
  $alt = $img->getAttribute('alt');

  $new_img = '<div style="background: transparent url('.$href.') no-repeat;
    background-position: center center; background-size: cover; width: '.$width.'px;
    height: '.$height.'px;">'.$alt.'</div>';

  return $new_img;
}

替换功能保持相同只改变管理DOM的部分

Answer 3

干得好.经过测试和运行的解决方案 如果PHP抛出任何错误,则会出现错误报告.子div还继承父div的宽度和高度.

<?php

error_reporting(E_ALL);

ini_set("log_errors", 1);

/**
 * Display of all other errors
 */
ini_set("display_errors", 1);

/**
 * Display of all startup errors
 */
ini_set("display_startup_errors", 1);

$content = '
<div class="article">
  <h1>heading</h1>
  <p>paragraph</p>
  <img src="/images/img-1.jpg" alt="alt for image">
</div>
';

$domDocument = new DOMDocument();
$domDocument->loadHTML($content);
$domElemsToRemove = [];

$domXpath = new DOMXpath($domDocument);
$nodes = $domXpath->query('//div[@class="article"]/img');


$newNode ="<div style='background: transparent url(/images/img-1.jpg) no-repeat; width: inherit; height: inherit; background-position: center center; background-size: cover; width: 566px; height: 576px;'>alt for new image</div>";
$newDom = $domDocument->createDocumentFragment();
$newDom->appendXML($newNode);


foreach ($nodes as $node) {
    $node->parentNode->appendChild($newDom);
    $node->parentNode->removeChild($node);
}

echo $domDocument->saveHTML();
?>

Answer 4

有没有办法用下面的div标签替换img标签？

是

一个).DOM(首选方式)

B).正则表达式

这两种方法已经在其他答案中实现,使用你喜欢的方法

注意:如果html是由php动态生成的,我会建议你在这里用regex提取alt和src赋值,然后从中创建一个字符串,这会给你更多的灵活性,例如:preg_match_all

$str ='<div class="article"><img src="/images/img-1.jpg" alt="alt for image"></div>';

preg_match_all('`src=(?:[\'"])(.*)[\'"].*alt=(?:[\'"])(.*)[\'"].*`U', $str, $matches);

$desiredHTML = <<<HTML
<div class="article">
 <div style="background: transparent url({$matches[1][0]}) no-repeat;
 background-position: center center; background-size: cover; width: 566px; 
 height: 576px;">{$matches[2][0]}</div>
</div>
HTML;

是否可以使用父div的宽度和高度？

是的, 通过使用以下js代码你可以做到这一点,因为你无法找到article没有渲染的div 的高度,你想要它们的像素,你必须使用JavaScript

var cl = document.getElementsByClassName('article');
    for (var i = 0; i <= cl.length; i++)
    {
        var width = cl[i].style.width;
        var height = cl[i].style.height;
        cl[i].firstElementChild.style.width = width;
        cl[i].firstElementChild.style.height = height;
    };

如果可能,我想使用str_replace函数？

不,使用str_replace函数是不可能的.