0

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;
  });
});
2
  • One of your problems is that URL is not delimited by anything. This would make your regexp extremely complex, as it now has to understand the format of URL. Even if you restrict yourself to http:, it's still tough.
    – user3458
    Nov 29, 2010 at 22:36
  • @Arkadiy: I can't control what people type into the shout box =(
    – Mottie
    Nov 29, 2010 at 22:42

1 Answer 1

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

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

8
  • +1 Thanks... you got me on the right track, but yeah I see the problem.
    – Mottie
    Nov 29, 2010 at 22:43
  • I got it, thanks!... I just added a couple of loops to break the links apart. I updated my demo above :)
    – Mottie
    Nov 30, 2010 at 15:34
  • @Brad Christie: Hmm, any clue why IE totally messes up on the first regex? When I put an alert inside the $.each(url..., the value of u never contains a url, only the text around it.
    – Mottie
    Dec 2, 2010 at 4:05
  • As per jsfiddle.net/Qf5Xm/1 it doesn't seem to be just IE, FF (atleast Beta 4) isn't doing so hot either. Let me get a few more sips in to my coffee and I'll give it a go. ;-) Dec 2, 2010 at 14:16
  • 1
    With a bit further research it appears it may be linked to this: blog.stevenlevithan.com/archives/cross-browser-split (though I'm still looking in to it). I even tried making my own regex and it's behaving differently, so I'm thinking it's how IE handles it. Dec 2, 2010 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.