php - w3s - html 튜토리얼



PHP로 백그라운드 이미지 div로 img 바꾸기 (10)

img 태그를 아래처럼 div 태그로 대체 할 수 있습니까?

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

(선택 사항) 또한 고정 width: 566px; height: 576px; 을 정의하는 대신 상위 div (예 : 기사 클래스)의 너비와 높이를 사용할 수 있습니다 width: 566px; height: 576px; width: 566px; height: 576px; ?

가능하다면 str_replace 함수를 사용하고 싶습니다.

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

편집하다:

class article에 여러 요소가있을 수 있으며 article 클래스 div 안에 다른 요소가있을 수 있으며 img를 div로 변경해야 할 수도 있습니다.

편집 2 :

내가 기사 div 안에 어떤 내용이 있어도되고 그냥 img를 div로 바꾸고 싶다는 의미였다.

내가 가질 수있는 것 :

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

https://ffff65535.com


img 태그를 아래처럼 div 태그로 대체 할 수 있습니까?

에이). DOM (선호되는 방식)

비). REGEX

두 가지 방법 모두 이미 다른 답변으로 구현되어 있으므로 원하는대로 사용하십시오.

참고 : html이 PHP에 의해 동적으로 생성되는 경우 altsrc 속성 값을 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 함수로는 불가능합니다.


  1. 그렇게하려면 preg_match 함수로 작업해야합니다.
  2. 높이와 너비를 "상속 (inherit)"으로 설정하십시오.

문제는 다음을 시도하십시오.

$string = ' <div class="article">
                <img src="/images/img-1.jpg" alt="alt for image">
            </div>';
preg_match('@<div class="article">(.*?)</div>@is', $string, $replace);
preg_match('/<img src="(.*?)" alt="(.*?)">/', $string, $matches);

$string = str_replace($replace[1], '<div style="background: transparent url('.$matches[1].') no-repeat; background-position: center center; background-size: cover; width: inherit; height: inherit;">'.$matches[2].'</div>', $string);

다음과 같이해볼 수 있습니다 :

$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 변경하십시오.


여기 내 접근 방식입니다, PHP에서 일반적인 자바 스크립트를 호출 :

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

예.

그러나 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;

이 메소드는 거의 전적으로 preg_replace . 몇 가지 멋진 추가 사항이 있습니다.

  1. CSS 값 wxh 가 대체의 일부로 추가됩니다.
  2. 다른 모든 주요 값 ( class , hrefalt )은 동적으로 대체됩니다.

기본적으로 두 패턴을 사용합니다. 첫 번째 패턴은 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="(.+)"[email protected]', $rep, $str );
}
    $str = replace($str, $css);
?>

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

:

http://ideone.com/TJHR1b


이전 html에서 새로운 html로 이동하려면 다음 두 가지를 알아야합니다.

  1. src 속성
  2. alt 속성

이 두 값을 알게되면 새로운 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%;} .article > div {width: 100%; height: 100%;}


파일을 문자열로 읽고 필요에 따라 바꾼 다음 새 파일에 다시 쓰거나 원본을 덮어 쓸 수 있습니다. 어쨌든 div에 클래스를 추가하기 만하면됩니다. 인라인 CSS는 고통입니다.


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을 사용하여 관리하는 부분 만 변경합니다.


preg_replace 사용 :

//your html code in a variable
$source = '<div class="article">
  <img src="/images/img-1.jpg" alt="alt for image1">
</div>
<div class="article">
  <img src="/images/img-5.jpg" alt="alt for image5">
</div>';

//class
class PregReplace{
    private static $instance;
    private $source;
    public $css = array('width'=>'600','height'=>'800','background-size'=>'cover','background-position'=>'center center','background'=>'transparent url($1) no-repeat');
    private $replace;
    private $result;
    private $pattern = '/\<div\s?class="article">\n?\r?\n?.*img\s?src="(.*?)"\salt="(.*?)".*\n?\r?\n?\<\/div\>/m';
    public function __construct(){

    }

    public function loadreplace(){
        $this->replace='<div class="article">
     <div style="background:'.$this->css['background'].'; background-position:'.$this->css['background-position'].'; background-size:'.$this->css['background-size'].'; width:'.$this->css['width'].'px; 
     height: '.$this->css['height'].'px;">$2</div>
    </div>';
    }

    public function setcss($array){
        $this->css = $array;
    }
    public function setsource($value){
        $this->source = $value;
        return $this;
    }
    public function setreplace($value){
        $this->replace = $value;
    }
    public function replacing(){
        $this->loadreplace();
        $this->result = preg_replace($this->pattern,$this->replace,$this->source);
        return $this;
    }
    public function result(){
        return $this->result;
    }
}

//process with preg_replace
$result = new PregReplace();
//you can set your css
$result->css['width'] = '566';
$result->css['height'] = '576';
//
var_dump($result->setsource($source)->replacing()->result());




css