0

This is the body of the article I want to manipulate with DOMXPath: enter image description here

That is the code I am using in order to encapsulate the <figure tag:

        $dom_err = libxml_use_internal_errors(true);
        $dom = new \DOMDocument('1.0', 'utf-8');
        $dom->loadHtml(mb_convert_encoding($arr['body_article'], 'HTML-ENTITIES', 'UTF-8'));
        $xpath = new \DOMXPath($dom);
        //dd($xpath);
        foreach ($xpath->query("//figure") as $img) {
            $p = $dom->createElement("p");
            $p->setAttribute('style', 'text-align:center');
            $img->parentNode->replaceChild($p, $img);
            $p->appendChild($img);
        }
        $body = $dom->saveHTML();

This is the dd($xpath) xml portion:

 xml: """
      <?xml version="1.0" standalone="yes"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
      <html>
        <body>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ex a arcu tempus tincidunt ac non nulla. Aliquam erat volutpat. Mauris nunc ex, imperdi ▶
          <figure class="image">
            <img src="/storage/12/articles/pictures/body_1574785274232_0d61f8370cad1d412f80b84d143e1257.jpeg"/>
            <figcaption>caption zzzzz</figcaption>
          </figure>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ex a arcu tempus tincidunt ac non nulla. Aliquam erat volutpat. Mauris nunc ex, imperdi ▶
          <p>&#xA0;</p>
        </body>
      </html>
      """

I want to encapsulate the figure tag into a p tag like so:

<p style="text-align:center">
    <figure class="image">
        <img ..>
        <figcaption ...>
    </figure>
</p>

After following this post I could achieve the goal in the eval test as we can see in the picture below. enter image description here

But when I run the code I can't see the same result in the browser: enter image description here The <figure class="image"> object is outside the <p style="text-align:center">. What am I doing wrong?

This is the $arr['body_article']:

"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo faucibus elit quis dapibus. Morbi at sagittis enim. Maecenas mattis convallis dui eu finibus. Duis turpis lectus, aliquet eu ex eu, gravida condimentum ante. Donec tempor metus in urna fringilla, in porttitor metus commodo. Sed lectus justo, interdum nec eros et, efficitur dictum dui. Nunc tincidunt dolor enim, dictum consectetur orci suscipit non. In iaculis orci dui, varius ullamcorper dolor suscipit at.</p><figure class="image"><img src="/storage/12/articles/pictures/body_1574789541753_8f9c966db248ca8501540ceea1e0901f.jpeg"><figcaption>test caption</figcaption></figure><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo faucibus elit quis dapibus. Morbi at sagittis enim. Maecenas mattis convallis dui eu finibus. Duis turpis lectus, aliquet eu ex eu, gravida condimentum ante. Donec tempor metus in urna fringilla, in porttitor metus commodo. Sed lectus justo, interdum nec eros et, efficitur dictum dui. Nunc tincidunt dolor enim, dictum consectetur orci suscipit non. In iaculis orci dui, varius ullamcorper dolor suscipit at.</p>"

Analysing the source code: enter image description here

IgorAlves
  • 5,086
  • 10
  • 52
  • 83
  • Can you output the value of `$arr['body_article']` as this is the actual HTML being processed. Another thing to check is if the browser has 'fixed' the markup, so view the source rather than use inspect (or whatever your browser uses). – Nigel Ren Nov 26 '19 at 17:20
  • You are right. The source code shows a complete different scenario. – IgorAlves Nov 26 '19 at 17:38
  • 1
    Could be worth checking the HTML spec as to if this there should be some other nesting - https://stackoverflow.com/questions/9852312/list-of-html5-elements-that-can-be-nested-inside-p-element doesn't show figure. – Nigel Ren Nov 26 '19 at 17:44
  • Yes we can't. My only goal is to wrap the `` and`
    ` inside the `

    `. I think I am going to close this post and modify the other one. It will be better.

     – IgorAlves Nov 26 '19 at 17:57

0 Answers0