Display preview onkey with textarea

Question

Can anybody help me? I want to to show a preview of an image link in . If you enter the link in a (prefix .png or .jpg for example) it should be displayed in the img element. please no php or server-side at all, it should display images/links like http://hellopledge.files.wordpress.com/2012/07/hello_medium-file3.jpg

Thank you

Answer 1

Like this: http://jsfiddle.net/uHnFp/

$('#field').keyup(function(){
   $('#img img').attr('src',$(this).val());
});

Modified:

http://jsfiddle.net/uHnFp/6/

$('#field').keyup(function(){
    var text = $(this).val();
    var url = text.match(/https?:\/\/(?:[a-z\-]+\.)+[a-z]{2,6}(?:\/[^\/#?]+)+\.(?:jpe?g|gif|png)/g);
    var i = 0;
    var html = '';
    while(i < url.length){
        html += '<img src="'+url[i]+'" />';
        console.log(url);
        i++;
    }
    if(url.length > 0){
        $('#img').fadeIn();
        $('#img').html(html);
    } else {
        $('#img').fadeOut();   
    }    
});

This will only get the first image. This could get more complex. You could make it preview each image it finds. Multiple images, etc. I haven't tested if this regex is exhaustive just one I found online.