用im

时间：2015-08-03 07:14:45

标签： php html css

有没有办法用下面的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>

所以，我可能在.article div中有任何内容，我希望将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>

14 个答案:

答案 0 :(得分：8)

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

@Override
protected void onRestart(){
    System.out.println("Restart");
    super.onRestart();
}

@Override
protected void onResume(){System.out.println("Resume");
    gamePanel.resumeActivity();
    super.onResume();
}

@Override
protected void onPause(){
    gamePanel.pauseMusic();
    gamePanel.pauseActivity();
    System.out.println("PAUSE");
    super.onPause();
}
@Override
protected void onStop(){
    System.out.println("STOP");
    super.onStop();
}
@Override
protected void onDestroy(){
    content.removeView(gamePanel);
    content.removeView(editText);
    gamePanel.stopMusic();
    System.out.println("DESTROY");
    super.onDestroy();
}

答案 1 :(得分：8)

您可以使用PHP’s native DOM library找到并替换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的部分

答案 2 :(得分：8)

你走了。经过测试和运行的解决方案如果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();
?>

答案 3 :(得分：5)

  

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

是

A）。 DOM （首选方式）

B）。的 REGEX

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

注意：如果html是由php动态生成的，我建议您使用alt {{3}提取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 功能无法实现。

答案 4 :(得分：4)

  1. 为此，您需要使用preg_match功能
  2. 尝试将高度和宽度设置为“inherit”

    3. 对于你的问题，试试这个：

    #smallContainer { text-align: center; }
.small { left: 0; }

答案 5 :(得分：4)

要从旧的html转到新的html，我们需要知道两件事：

  1. src属性
  2. alt属性

    3. 一旦我们知道这两个值，我们就可以轻松创建新的html格式。我这样做如下：

    <?php
$orig_html = <<<HERE
<div class="article">
  <img src="http://lorempixel.com/400/200" alt="alt for image">
</div>
HERE;

echo new_html($orig_html);

/* helper function to get the value of an attribute:
$attribute: the attribute you want to check (e.g. src)
$source: The html you want it to parse */
function get_attribute($attribute, $source) {
    $query  = '/' . $attribute . '="([^"]*)"/i';
    $result = array();
    preg_match($query, $source, $result);
    return $result[1];
}

/* helper function to return new html from the old html
$source: the old html */
function new_html($source) {
    $src = get_attribute('src', $source);
    $alt = get_attribute('alt', $source);

    return <<<HERE
 <div class="article">
   <div style="background: transparent url($src) no-repeat;
   background-position: center center; background-size: cover;">$alt</div>
  </div>
HERE;
}
?>

    除非在标记中定义宽度和高度，否则我们不能使用php来读取父级（文章类）的宽度和高度。从你的例子看，似乎这些值不在标记中，所以我假设这些维度是由css提供的？

    相反，您始终可以使用以下css为图像设置样式： .article > div {width: 100%; height: 100%;}。

答案 6 :(得分：4)

您可以尝试这样的事情：

$content = "this is something with an <img src=\"test.png\"/> in it.";
$replaceWith = '<div style="background:url($1)"></div>';
$content = preg_replace('/<img\s+src="([^"]+)"[^>]+>/i', $replaceWith, $content); 
echo $content;

根据您的标记更改$replaceWith。

答案 7 :(得分：4)

YES。

但是str_replace不能单独做到这一点。

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

// img -> div
$res = str_replace('<img', '<div', $article);
// src -> style
$res = preg_replace('/src="([^"]+)"/i', 'style="background: transparent url($1) no-repeat; background-position: center center; background-size: cover; width: 566px; height: 576px;"', $res);
// alt -> innerHTML
$res = preg_replace('/ alt="(.*)">/i', '>$1</div>', $res);
echo $res;

答案 8 :(得分：4)

使用preg_replace：

 allowed_attrs = []
 def allowed(f):
     allowed_attrs.append(f.__name__)
     return f

答案 9 :(得分：4)

这是我的方法，从php调用普通的Java脚本：

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

<?php
$removeOldContent = '<script>document.getElementsByClassName("article")[0].remove();</script>';
$newContent = '<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>';

$content = $removeOldContent . $newContent;

// this could be you replacing condition
// false will keep old content
// true will remove old content and view new content
if (false)
    echo $content;

答案 10 :(得分：3)

您可以将文件读入字符串，替换为您的需要，然后写回新文件或覆盖原始文件。无论如何，我可能只是为div添加一个类。内联css是一种痛苦。

答案 11 :(得分：3)

您可以使用JavaScript: indexOf vs. Match when Searching Strings?：

  

与大多数jQuery方法一样，.replaceWith()方法返回   jQuery对象，以便可以将其他方法链接到它上面。然而，   必须注意的是返回原始的jQuery对象。这个   object指的是从DOM中删除的元素，而不是   已取代它的新元素。

     

.replaceWith()方法删除所有数据和事件处理程序   与删除的节点相关联。

$('.article img').replaceWith(function(i, v){
    return $('<div/>', {
        style: 'background-image: url('+this.src+')',
        html: '<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>'
    })
})

OR 

echo "$('.article img').replaceWith(function(i, v){
            return $('<div/>', {
                style: 'background-image: url('+this.src+')',
                html: '<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>'
            })
        })";

replaceWith method

答案 12 :(得分：2)

这将完成你想要做的事情。希望这会有所帮助。

$prev_str = '<div class="article"><img src="pics/flower.jpg" alt="alt for image"></div>';
preg_match('/'.preg_quote("<div class=\"").'(.*?)'.preg_quote("\"><img").'/is', $prev_str, $class);
$class_name=$class[1];//article
preg_match('/'.preg_quote("<img src=\"").'(.*?)'.preg_quote("\" alt=\"").'/is', $prev_str, $image);
$image_path=$image[1];//pics/flower.jpg
preg_match('/'.preg_quote("alt=\"").'(.*?)'.preg_quote("\"><").'/is', $prev_str, $alt);
$alt=$alt[1];//alt for image
//size that we are going to use in the div as well image div
$width="200px";
$height="200px";
echo '
<style>
div.article{
    min-height:'.$height.';
    width:'.$width.';
}
</style>';
/** additional hints in css formatting
div.article div{
    //display: inline-block;
    //width:inherit;
    //height:inherit;
    //width:100%;
    //height:100%;
}
**/
echo '<div class="'.$class_name.'">';
echo '<div style="background: transparent url('.$image_path.') no-repeat;
 background-position: center center; background-size: cover;width:'.$height.'; 
 height: '.$width.';">'.$alt.'</div>
</div>';

答案 13 :(得分：2)

这种方法几乎完全是preg_replace;它确实有一些很好的补充：

  1. CSS值w x h将作为替换的一部分添加。
  2. 动态替换所有其他主要值（class，href和alt）。

    3. 它基本上使用两种模式，第一种解析CSS，第二种取代<div>。

    <强>代码：

    <?php

$str = '<div class="article"><img src="/images/image.png" alt="alt for image"></div>';
$css = '<style> .article { font-size:16px; font-weight:bold; width:566px; height:576px; } </style>
';

function replace($str, $css) {

    preg_match( '@>\s\.(.+)\s{\s(.*)\s}@', $css, $res);

        $style['class'] = $res[1];
        $attrs = explode("; ", $res[2]);

        foreach ($attrs as $attr) {
                if (strlen(trim($attr)) > 0) {
                $kv = explode(":", trim($attr));
                $style[trim($kv[0])] = trim($kv[1]);
            }
        }

$rep = '<div class="$1">
 <div style="background: transparent url($2) no-repeat; 
 background-position: center center; background-size: cover; width: '.$style['width'].';
 height: '.$style['height'].'">$3</div>
</div>
';

    return preg_replace( '@.+class="(.+)"><.*="(.+)"\\salt="(.+)".+@', $rep, $str );
}
    $str = replace($str, $css);
?>

<html>
<head>
<?php echo $css; ?>
</head>
<body>
<?php echo $str; ?>
</body>
</html>

    示例：

    <强> http://ideone.com/TJHR1b

相关问题
最新问题