Question

I need a little help with some regex I have. Basically I have a shout box that only shows text. I would like to replace urls with links and image urls with the image. I’ve got the basics working, it just when I try to name a link that I have problems, well if there is more than one link… check out the demo.

Named link format {name}:url should become <a href="url">name</a>. The problem I am having is with shout #5 where the regex doesn’t split the two urls properly.

HTML

<ul>
 <li>Shout #1 and a link to google: http://www.google.com</li>
 <li>Shout #2 with an image: http://i201.photobucket.com/albums/aa236/Mottie1/SMRT.jpg</li>
 <li>Shout #3 with two links: http://www.google.com and http://www.yahoo.com</li>
 <li>Shout #4 with named link: {google}:http://www.google.com</li>
 <li>Shout #5 with two named links: {google}:http://www.google.com and {yahoo}:http://www.yahoo.com and {google}:http://www.google.com</li>
</ul>

Script

var rex1 = /(\{(.+)\}:)?(http\:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+)/g,
  rex2 = /(http\:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/g;

 $('ul li').each(function(i){
  var shout = $(this);
  shout.html(function(i,h){
   var p = h.split(rex1),
    img = h.match(rex2),
    typ = (p[2] !== '') ? '<a href="$3">$2</a>' : '<a href="$3">link</a>';
   if (img !== null) {
    shout.addClass('shoutWithImage')
    typ = '<img src="' + img + '" alt="" />';
   }
   return h.replace(rex1, typ);
  });
 });

---

Update: I figured it out thanks to Brad helping me with the regex. In case anyone needs it, here is the updated demo and code (Now works in IE!!):

var rex1 = /(\{(.+?)\}:)?(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+)/g,
rex2 = /(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/g;

$('ul li').each(function(i) {
  var shout = $(this);
  shout.html(function(i, h) {
    var txt, url = h.split(' '),
    img = h.match(rex2);
    if (img !== null) {
      shout.addClass('shoutWithImage');
      $.each(img, function(i, image) {
        h = h.replace(image, '<img src="' + image + '"  alt=""  />');
      });
    } else {
      $.each(url, function(i, u) {
        if (rex1.test(u)) {
          txt = u.split(':')[0] || ' ';
          if (txt.indexOf('{') >= 0) {
            u = u.replace(txt + ':', '');
            txt = txt.replace(/[\{\}]/g, '');
          } else {
            txt = '';
          }
          url[i] = '<a href="' + u + '">' + ((txt == '') ? 'link' : txt) + '</a>';
        }
      });
      h = url.join(' ');
    }
    return h;
  });
});

Answer 1

(\{(.+?)\}:)

you need the ? to make the regex become “ungreedy” and not just find the next brace.

EDIT

However, if you remove the {yahoo}: the second link becomes null too (seems to populate the anchor tag, just no attribute within). This almost seems to be a victim of using a split instead of a replace. I would almost recommend doing a once-over looking for links first, then go back around looking for images (I don’t see any harm in off-linking directly to the image, unless that’s not a desired result?)