Convertir url a html <a> url de etiqueta y de imagen a <img> etiqueta con expresiones regulares de javascript

Question

Estoy tratando de escribir una función para crear etiquetas de enlaces regulares y etiquetas de enlaces de imagen del texto en un área de texto.

funciona la primera vez para ambos, pero si pego una etiqueta "a href" allí, la vincula doblemente. no hace las imágenes debido a la verificación de ImageRegex. alguna idea de cómo hacer que esto funcione?

tenga en cuenta que el área de texto podría tener múltiples URL de ambos tipos.

$("#message").blur(function() { 
    var imageRegex = /\.(png|jpg|jpeg|gif)$/; 
    var s = $(this).val().replace(/(?:^|[^"'])(\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|])/gim, function(str) { 
     if (str.match(imageRegex)) { 
      return('<img src="' + str + '" />'); 
     } else { 
      return('<a href="' + str + '">' + str + '</a>'); 
     }  
    }); 
    $(this).val(s);   
}); 

Answer 1

no estoy grande en jQuery, pero me hizo una solución vanillaJS a su problema. ¡Mira este violín! http://jsfiddle.net/dv0s5onj/

var yourString=document.getElementById('message').innerHTML; 

var count=0; 

var urls=yourString.match(/(?:^|[^"'])(\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|])/gim); 
// Make an array of urls 

urls.forEach(function(v,i,a){ 
    var n = yourString.indexOf(v,count); //get location of string 

    if(v.match(/\.(png|jpg|jpeg|gif)$/)===null){// Check if image 
     // If link replace yourString with new anchor tag 
     yourString = strSplice(yourString,n,v.length,'<a href="'+v+'">'+v+'</a>'); 
     count += (v.length*2)+16;// Increase count incase there are multiple of the same url. 
    }else{ 
     // If link replace yourString with img tag 
     yourString = strSplice(yourString,n,v.length,'<img src="'+v+'" height="120px;" width="120px;"/>'); 
     count += v.length+14;// Increase count incase there are multiple of the same url. 
    } 
}); 

// A function to splice strings that I found on another StackOverflow Question. 
function strSplice(str, index, count, add) { 
    return str.slice(0, index) + (add || "") + str.slice(index + count); 
} 

//Replace the value of your element with your string 
document.getElementById('message').innerHTML=yourString;