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. Commented Nov 29, 2010 at 22:36
  • @Arkadiy: I can't control what people type into the shout box =( Commented 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?)

Sign up to request clarification or add additional context in comments.

8 Comments

+1 Thanks... you got me on the right track, but yeah I see the problem.
I got it, thanks!... I just added a couple of loops to break the links apart. I updated my demo above :)
@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.
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. ;-)
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.
|

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.