preg_replace - turn into

Question

I'm struggling to turn an image tag into a link and copy parameters within the tag i.e.

<img src="/images/image1.jpg" alt="The name of image">

into

<a href="/images/image1.jpg" target="_self" rel="zoom" title="The name of image"><img src="/images/image1.jpg" alt="The name of image"></a>

My problem is not just duplicating the src and alt data but account for missing and extra tags i.e.

<img src="/images/image1.jpg" >

into

<a href="/images/image1.jpg" target="_self" rel="zoom" title=""><img src="/images/image1.jpg" ></a>

and

<img style="padding:5px;" src="/images/image1.jpg" alt="The name of the image">

into

<a href="/images/image1.jpg" target="_self" rel="zoom" title="The name of the image"><img style="padding:5px;" src="/images/image1.jpg" alt="The name of the image"></a>

This needs to be done for all instances of the img tag throughout a string.

Not meaning to sound like a challenge but can anyone propose a possible solution, I'm sure this can be done with preg_replace but I just can't work it through?

Thank you

possible duplicate of [How do you parse and process HTML/XML in PHP?](http://stackoverflow.com/questions/3577641/how-do-you-parse-and-process-html-xml-in-php) — Quentin, Sep 06 '13 at 08:55
Hello Yotam, simply put I have a CMS system where the client can upload images and the code creates img tags. I need to parse the code generated from the CMS to make every image clickable for a lightbox. Therefore I need to encapsulate each img tag within a 'a href' tag duplicating some of the img tag parameters - and hey presto, clickable lightboxed images. However without using preg_match which I believe will be the cleanest method, my coding will be horrendous! — user2751834, Sep 08 '13 at 10:51

score 1 · Answer 1 · answered Sep 06 '13 at 09:25

The simplest way to do that: HTML:

<span id="My_ID"><img class="My_img" src="/images/image1.jpg" alt="The name of image" /></span>

JavaScript and JQUERY(Not necessary but i used it for browser compatibility):

var first= true;
$('.My_img').hover(function(){    
    if(first == true){
     //First time this prevent Dulicated runing and shows errors
        first = false;//it is not thew first time anymore
var alt = $('.My_img').attr('alt');//Get the img alt
    var src = $('.My_img').attr('src');//Get the img src
    document.getElementById('My_ID').innerHTML = '<a href="' + src + '" target="_self" rel="zoom" title="' + alt + '"  ><img src="' + src +'" alt="' + alt + '" width="200" height="100"></a>';
    }
});

To demostrate the above her is a fiddle:

http://jsfiddle.net/Mh9Np/

Simply but innerHTML is a bad practice as everyone say so i will give you an idea about the other way:(Samse HTML)

1-Store the img in a variable

2-Store the alt and src attribute in variables.

2-Create the a element.

3-Set to it the attributes you want with the help of alt and src variables.

4-Append the img to a.

5-Append a to the span.

6-Delete the original img.//Optional it might help resolving some styling issues.

preg_replace - turn into

1 Answers1