Question

I have a text with multiple links in it. One single link looks like

<a href="http://www.mydomain.com/files/test1.pdf" target="_blank">My link</a>

First, I would like to wrap div tag around all href tags but only if href is beggining with http://www.mydomain.com/files/. So the link above (because it starts with that prefix) should become

<div class="myLink">
   <a href="http://www.mydomain.com/files/test1.pdf" target="_blank">My link</a>
</div>

Then depending on file extension (ending characters of the href) add an image before a link so it becomes

<div class="myLink">
   <img src="pdf_file_icon.png" alt="File type icon" />
   <a href="http://www.mydomain.com/files/test1.pdf" target="_blank">My link</a>
</div>

And optionally add some my text after the link so the final version becomes

<div class="myLink">
   <img src="pdf_file_icon.png" alt="File type icon" />
   <a href="http://www.mydomain.com/files/test1.pdf" target="_blank">My link</a>
   <span class="fileSize">1.3 Mb</span>
</div>

I need solution for both PHP and JavaScript/jQuery (I think it’s easier for jQuery because of it’s selector capabilites?).

---

What I want to get is to move from regular text link to something like this (don’t bother with file size, it’s pre-calculated so it’s just like any other regular/dummy text)

Edit #1

Here is my try in PHP

$regexp = "<a\s[^>]*href=(\"??)(http:\/\/www\.mydomain\.com\/files\/[^\" >]*?)\\1[^>]*>(.*)<\/a>";
$text = preg_replace("/$regexp/siU", "<div class=\"fileAttachment\"><img src=\"pdf_file_icon.png\" alt=\"File type icon\" /><a href=\"$2\" target=\"_blank\">$3</a></div>", $text);

But I’m not sure how immediately to check for file extension and depending on it insert appropriate image (pdf_file_icon.png)?

Answer 1

Because I’m a bit bored, here’s a jQuery implementation:

$('a[href^="http://www.mydomain.com/files"]')
    .each(function() {
        var t = $(this);
        var href = $(this).attr('href');
        var ext = href.substring(href.lastIndexOf('.') + 1);
        t.wrap('<div class="mylink"></div>');
        switch (ext) {
            case 'pdf': 
               t.before('<img src="pdf_file_icon.png" alt="File type icon" />'); 
               break;
            // Add more types here
        }
        t.after('<span class="fileSize">1.3 Mb</span>');
    }
);​

http://jsfiddle.net/AK9nG/

Surely to do it in PHP you can just edit the HTML directly?