title: Detect url / links and replace image with img tag and links with a href
body: <p>I am trying to write a function that would take a string, parse it, and replace the image urls with a <code>&lt;img src="image"&gt;</code> and the links with <code>&lt;a href="link"&gt;link&lt;/a&gt;</code>.</p>
  
  <p>this is what i did : </p>
  
  <pre><code>var __urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;
  var __imgRegex = /^ftp|http|https?:\/\/(?:[a-z\-]+\.)+[a-z]{2,6}(?:\/[^\/#?]+)+\.(?:jpe?g|gif|png)$/ig;
  
  function parseURL($string){
      var exp = __urlRegex;
      return $string.replace(exp,function(match){
              if(__imgRegex.test(match,contents)){
                  return '&lt;img src="'+contents+'" width="200" /&gt;';
              }
              else{
                  return '&lt;a href="'+contents+'" target="_blank"&gt;'+contents+'&lt;/a&gt;';
              }
          }
      );
  }
  </code></pre>
  
  <p>The regexes work fine when i did some tests. However on implementation there's some wierd mumbo jumbo happening. If i throw say 5 image urls at it, it parses the 1st as an image but the second as a link and this goes on alternatively!!</p>
  
  <p>Where I am going wrong?</p>
  
  <p>Sample string i used for testing : </p>
  
  <pre><code>This is a kitten http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg
  with a sibling which is also a kitten http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg
  and a sister which is also a kitten http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg
  and lots of kittens
  http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg
  http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg
  http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg
  http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg
  </code></pre>
  
  <p>And this is the output that i get</p>
  
  <pre><code>&lt;p&gt;This is a kitten &lt;img src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" width="200"&gt;
  with a sibling which is also a kitten &lt;a href="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" target="_blank"&gt;http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg&lt;/a&gt;
  and a sister which is also a kitten &lt;img src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" width="200"&gt;
  and lots of kittens
  undefined
  &lt;img src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" width="200"&gt;
  &lt;a href="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" target="_blank"&gt;http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg&lt;/a&gt;
  &lt;img src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" width="200"&gt;&lt;/p&gt;
  </code></pre>