How to use php dom document to remove and replace tags

Question

I have image tag <img src="path_to_file.png"> but I want that the image tag be converted to link in mobile site. So I want img to be converted to an href:

<a href="path_to_file.png" target="_blank">Click here to open in new tab</a>

I am getting started with php dom. I could get all the attribute listed.

$newdocument = new DOMDocument();
$newdocument->loadHTML();
$getimagetag = $doc->getElementsByTagName('img');
foreach($getimagetag as $tag) {
    echo $src=$tag->getAttribute('src');
}

But how do we get the src attribute , then remove the img tag completely because it contains other parameter like height and length and then create new tag of link?

Hi guys I could get it done from php dom using following code

$input="<img src='path_to_file.png' height='50'>";
    $doc = new DOMDocument();
    $doc->loadHTML($input);
    $imageTags = $doc->getElementsByTagName('img');
    foreach($imageTags as $tag) {
        $src=$tag->getAttribute('src'); 
        $a=$doc->createElement('a','click here to open in new tab');
        $a->setAttribute('href',$src);
        $a->setAttribute('style','color:red;');
        $tag->parentNode->replaceChild($a,$tag);
        } 
        $input=$doc->saveHTML();
echo $input;

The create element can also be used to put text between <a></a> ie Click...new tab.

replacechild is used to remove $tag i.e. img and replace it with a tag. By setting attribute, we can add other parameters like style,target etc.

I used php dom in the end because I only wanted the data that I get from mysql to be converted and not the other elements like logo of website. Ofcourse it can be possible using javascript too.

Thanks

@dave chen for javascript way and pointing to detecting mobile link.

@nate for pointing me to a answer.

Check out this duplicate-like solution: stackoverflow.com/a/3195048/2609094 — user2609094
– user2609094, Commented Jul 28, 2013 at 17:13
hi thanks for the code...but I wanted to ask that how do I input text click here to open in new tab between the <a href="path_to_file.png"></a> — Moz
– Moz, Commented Jul 28, 2013 at 17:27

Lwyrn · Accepted Answer · 2013-07-28 17:08:14Z

3

Use phpQuery, it's amazing. It's just like using jquery! :) https://code.google.com/p/phpquery/

answered Jul 28, 2013 at 17:08

Lwyrn

1,9311 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dave Chen · Accepted Answer · 2013-07-28 17:29:36Z

2

I would recommend doing this with JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Images Test</title>
    <script>
        window.onload = changeImages;

        function changeImages() {
            var images = document.getElementsByTagName("img");

            while (images.length > 0) {
                var imageLink       = document.createElement("a");
                imageLink.href      = images[0].src;
                imageLink.innerHTML = "Click here to view " + images[0].title;
                images[0].parentNode.replaceChild(imageLink, images[0]);
            }
        }
    </script>
</head>
<body>
    Here is a image of flowers  : <img src="images/flowers.bmp"   title="Flowers"  ><br>
    Here is a image of lakes    : <img src="images/lakes.bmp"     title="Lakes"    ><br>
    Here is a image of computers: <img src="images/computers.bmp" title="Computers"><br>
</body>
</html>

Example

answered Jul 28, 2013 at 17:29

Dave Chen

11k8 gold badges42 silver badges72 bronze badges

2 Comments

Moz Over a year ago

Hi thanks!I had completely forgotten javascript can be used too!

Dave Chen Over a year ago

I would like to point to stackoverflow.com/questions/11381673/… for detecting mobile, and switch your tags based on this.

Collectives™ on Stack Overflow

How to use php dom document to remove and replace tags

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related