regex to wrap img tag with href containg the src

Question

[Edited - Sorry Bart] I've looked at other answers but struggling to match this. I want to wrap an image tag where the src is the second attribute (after title) with a specific anchor tag that contains a link to the image found in the src from the image tag.

Example of img tag in string. This has been entered via tinymce wysiwyg and always adds title then src.

<img title="who_main_Layer_1.jpg" src="../../images/who_main_Layer_1.jpg" alt="who_main_Layer_1.jpg" width="380" height="268" />

I need to take all of these and wrap with the following href:

<a href="event:images/expand/image.jpg"><img src=”images/image.jpg” /></a>

The image src points to the thumbnail and the (Flash AS3 Event) pops up the full size version. Both images named the same just different folders.

Here is a full example of a string that would need the regex running against (Due to sensitive data I've substituted text for Lorem ipsum, but the layout is the same!):

<p>Lorem ipsum dolor sit amet</p>
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit  
ametLoremipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem 
ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
<p>&nbsp;</p>
<p><img title="who_main_Layer_1.jpg" src="../../images/who_main_Layer_1.jpg" 
alt="who_main_Layer_1.jpg" width="380" height="268" /></p>
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem 
ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum 
dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor 
sit  
ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
<p>&nbsp;</p>
<p><img title="who_main_Layer_1.jpg" src="../../images/who_main_Layer_1.jpg" 
alt="who_main_Layer_1.jpg" width="380" height="268" /></p>`

Many thanks in advance, Marc

Answer 1

Similar questions have been answered several times and the answer is always the same: do not use regular expressions to tamper with HTML. In PHP, you can use XPath and the SimpleXml or DOMParser extensions to solve this problem.

Sorry for posting so many links to my own answers but the answers themselves and the questions they are answering contain a lot of information on the subject.

Answer 2

Try this code:

<?php
$str = '<img title="who_main_Layer_1.jpg" src="../../images/who_main_Layer_1.jpg" alt="who_main_Layer_1.jpg" width="380" height="268" />';

preg_match('#src="(?:.*/)?(.*?)"#', $str, $match);
$src = $match[1];
?>
<a href="event:images/expand/<?php echo $src; ?>"><img src=”images/<?php echo $src; ?>” /></a>

EDIT: another version to account for multiple tags in the string:

$replace = '<a href="event:images/expand/$1"><img src="images/$1" /></a>';
$str = preg_replace('#<\s*img.*?src="(?:[^"]+/)?(.*?)".*?>#s', $replace, $str);

Answer 3

Try this :

$newString = preg_replace('`<img([^>]*)src="\\.\\./\\.\\./images/([^"]+)"([^>])*>`','<a href="event:images/expand/$2"><img$1src="images/$2"$3></a>', $oldString);

Limitations are :

• It will apply the changes in things like <input value='<img src="../../images/test.jpg/>"'/>
• If " are replaced by ' in your img tags, you'll have to change the regexp
• It will choke on things like <img alt="6>5" src="../../images/test.png"/>

I agree with other commenters saying regexp are bad to parse HTML. But there's almost no parsing here and the format of things to replace seems to be under control (generated by tinymce).