How to display images from url that displayed in simple text using jquery

Question

Hi Friends i have this problem.

I have this

<div  id="text">
Hello world this just a demo.
http://upload.wikimedia.org/wikipedia/it/e/e1/Nba1.png
</div>

Now i need to convert that in this with jquery.

<div id="text">
Hello world this just a demo.
<img src="http://upload.wikimedia.org/wikipedia/it/e/e1/Nba1.png" width="150" height="150" alt="Nba">
</div>

Some ideas or already plugin. 1 Step ist detecting a image url form div id text 2 Replace the detected image url with html content 3 if detected url if ist not a image replace them with html content Thank You

No the image url ist allvays different and also the image file type — Robert Mrsic, Jun 08 '12 at 20:45
if i understand u, check this and see if helps you, http://stackoverflow.com/questions/6773799/find-text-in-a-string-and-prependto-somewhere-else , maybe can give u some light — Ricardo Binns, Jun 08 '12 at 20:50
The Problem ist that i need first to detect a valid image url and then replace them with html image display code — Robert Mrsic, Jun 08 '12 at 20:56

score 0 · Answer 1 · answered Jun 08 '12 at 21:10

0

This is how you do it in PHP, and I don't see a reason for not doing it in PHP

<?php

function get_string_between($string, $start, $end){
    $string = " ".$string;
    $ini = strpos($string,$start);
    if ($ini == 0) return "";
    $ini += strlen($start);
    $len = strpos($string,$end,$ini) - $ini;
    return substr($string,$ini,$len);
}

$fullstring = '
 <div  id="text">
 Hello world this just a demo.
 http://upload.wikimedia.org/wikipedia/it/e/e1/Nba1.png
 </div>';

$start = "http:";
$end = "</div>";

$parsed = get_string_between($fullstring, $start, $end);

echo $start.$parsed; // (result = dog)

?>

and I think the extension check is pretty straight forward, just check google "PHP check valid image extension" or similar query.

answered Jun 08 '12 at 21:10

Grigor

4,139
10
41
79

in any way i search to evite to use php to evite server works and later i will implement some other functions with jquery – Robert Mrsic Jun 08 '12 at 21:24
well, try to convert that function to javascript – Grigor Jun 08 '12 at 21:27
that great idea but i am not good coder and i dont no how to do that – Robert Mrsic Jun 08 '12 at 21:29
OK, I tried to do it for you, but it is not fully functioning.. http://jsfiddle.net/Ms2jC/1/ check out some tutorials and try to find whats wrong with it – Grigor Jun 08 '12 at 21:35

score 0 · Answer 2 · answered Jun 08 '12 at 21:22

0

First add a id to your url

  <div  id="text">
  Hello world this just a demo.
  <div id="img">http://upload.wikimedia.org/wikipedia/it/e/e1/Nba1.png</div>
  </div>

Then get url to jquery like this

var url=$('#img').text();

Then add image tags to it and append:

var real_img='<img src="'+url+'" width="150" height="150" alt="Nba">';

$('#img').html(real_img);

answered Jun 08 '12 at 21:22

Jadzia

164
1
9

1

To add id to my url i need it to detect id first from text in div – Robert Mrsic Jun 08 '12 at 21:27
Can you please explain a bit more so i can provide u solution – Jadzia Jun 09 '12 at 02:09
I have text comment list. Now some comments contain images url or simple web site url. Now i need to detect first the url then detect what type of url. Then replace it like you tell up var real_img=''; – Robert Mrsic Jun 09 '12 at 07:07
So here 3 major things come. First image url, second web url and 3 rd video url. Do you want all three of them or just image? – Jadzia Jun 09 '12 at 07:29
If ist possible all 3 that will be wily perfect and greattt – Robert Mrsic Jun 09 '12 at 07:40
Even if ist only images and urls that will be great – Robert Mrsic Jun 09 '12 at 08:36
Try this tutorial for web http://www.9lessons.info/2010/06/facebook-like-extracting-url-data-with.html – Jadzia Jun 09 '12 at 08:53

score 0 · Answer 3 · answered Jun 09 '12 at 15:50

With Help of @Engineer here ist the solution for sombody that have same problem as me

HTML

<div id="content-url">
    Hello World<br>
 http://www.goalterest.com/  
    http://www.jquery.com/  
    http://www.google.com/  
 http://www.esotech.org/wp-content/uploads/2011/12/jquery_logo.png
    http://www.linuxtrent.it/sites/default/files/images/drupal-logo.jpg
    <div id="urls"></div>
    <div id="photos"></div>
</div>

JQUERY

var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var photoRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]).(?:jpg|gif|png)/ig;

  var url_url= $('#content-url').html().match(urlRegex);
var url_photo= $('#content-url').html().match(photoRegex);

//Added
$('#content-url').html( $('#content-url').html().replace(urlRegex,''));
//----------

$.each( url_url, function(i,value){
   var convert_url='<a href="'+url_url[i]+'">'+url_url[i]+'</a><br>';

   $('#urls').append(convert_url)
       });
    $.each( url_photo, function(i,value){

   var convert_photo='<img src="'+url_photo[i]+'" width="150" height="150" alt="Nba"><br>';
   $('#photos').append(convert_photo)
});

Thanks to ALL

How to display images from url that displayed in simple text using jquery

3 Answers3