title: Regex replace url with links
body: <p>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 <a href="http://jsfiddle.net/Mottie/wYC52/" rel="nofollow">demo</a>.</p>
  
  <p>Named link format <code>{name}:url</code> should become <code>&lt;a href="url"&gt;name&lt;/a&gt;</code>. The problem I am having is with shout #5 where the regex doesn't split the two urls properly.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li&gt;Shout #1 and a link to google: http://www.google.com&lt;/li&gt;
   &lt;li&gt;Shout #2 with an image: http://i201.photobucket.com/albums/aa236/Mottie1/SMRT.jpg&lt;/li&gt;
   &lt;li&gt;Shout #3 with two links: http://www.google.com and http://www.yahoo.com&lt;/li&gt;
   &lt;li&gt;Shout #4 with named link: {google}:http://www.google.com&lt;/li&gt;
   &lt;li&gt;Shout #5 with two named links: {google}:http://www.google.com and {yahoo}:http://www.yahoo.com and {google}:http://www.google.com&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>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] !== '') ? '&lt;a href="$3"&gt;$2&lt;/a&gt;' : '&lt;a href="$3"&gt;link&lt;/a&gt;';
     if (img !== null) {
      shout.addClass('shoutWithImage')
      typ = '&lt;img src="' + img + '" alt="" /&gt;';
     }
     return h.replace(rex1, typ);
    });
   });
  </code></pre>
  
  <hr>
  
  <p><strong>Update:</strong> I figured it out thanks to Brad helping me with the regex. In case anyone needs it, here is the <a href="http://jsfiddle.net/Mottie/Qf5Xm/7/" rel="nofollow">updated demo</a> and code (Now works in IE!!):</p>
  
  <pre><code>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, '&lt;img src="' + image + '"  alt=""  /&gt;');
        });
      } else {
        $.each(url, function(i, u) {
          if (rex1.test(u)) {
            txt = u.split(':')[0] || ' ';
            if (txt.indexOf('{') &gt;= 0) {
              u = u.replace(txt + ':', '');
              txt = txt.replace(/[\{\}]/g, '');
            } else {
              txt = '';
            }
            url[i] = '&lt;a href="' + u + '"&gt;' + ((txt == '') ? 'link' : txt) + '&lt;/a&gt;';
          }
        });
        h = url.join(' ');
      }
      return h;
    });
  });
  </code></pre>