0

[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

ed103
  • 123
  • 3
  • 11
  • Try posting code again. See http://stackoverflow.com/editing-help how to do that properly. – Bart Kiers Nov 19 '09 at 10:48
  • Thanks Bart, So further to question, I need to find all image tags in string and then wrap them with href like so: `` The images names are the same, just different directory. Thumbnails and fullsize. – ed103 Nov 19 '09 at 10:59
  • Marc, in your original post you were talking about finding img tags whose attributes had a specific order, yet you don't say anything about that, nor does your single example contain any hints to it. Please edit your original post (do not add comments to it) and explain in great detail what it is you're trying to do, otherwise I can't help. – Bart Kiers Nov 19 '09 at 11:05
  • In your sample, you've removed the other attributes (title, alt, width and height). Is that intentional? – Kobi Nov 19 '09 at 11:25
  • It was intended to make it easier to read. Perhaps I've made it more misleading? – ed103 Nov 19 '09 at 11:29
  • Yes, don't try to simplify things, it works misleading. Write them down exactly as you encounter them and how you want to see them converted to. Thanks. – Bart Kiers Nov 19 '09 at 11:54
  • Please also confirm that the order is the key here. In other words, you DON'T want to match/find img-tags that have the src-attribute in the first or third place. – Bart Kiers Nov 19 '09 at 11:55
  • That wasn't the case but Kemper has come up with the solution. Thanks for your help. – ed103 Nov 19 '09 at 12:54

3 Answers3

4

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.

Community
  • 1
  • 1
soulmerge
  • 73,842
  • 19
  • 118
  • 155
  • Thanks, I'll look at those links. Starting with 'do not use regex' :) I was sure you could use it; but will read now. Cheers. – ed103 Nov 19 '09 at 11:06
  • You can use it, but it quickly gets very tricky, because what you are manipulating is a grammar which (mostly) takes note of structure but ignores layout, whereas regexp is really a character-by-character mechanism. – Colin Fine Nov 19 '09 at 12:43
3

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);
Matteo Riva
  • 24,728
  • 12
  • 72
  • 104
0

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

Arkh
  • 8,416
  • 40
  • 45