如何使用jquery显示以简单文本显示的url中的图像

嗨，朋友们，我有这个问题

我有这个

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

你好，世界，这只是一个演示。
http://upload.wikimedia.org/wikipedia/it/e/e1/Nba1.png

现在，我需要用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>

你好，世界，这只是一个演示。

一些想法或者已经有了。 第一步是检测图像url表单div id文本 2用html内容替换检测到的图像url 3如果检测到url，如果不是图像，则将其替换为html内容

---

谢谢你

这就是你在PHP中的实现方式，我看不出有什么理由不在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)

?>

---

我认为扩展检查非常简单，只需检查google“PHP检查有效图像扩展”或类似的查询。

首先在url中添加一个id

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

然后向其添加图像标记并附加：

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

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

var real\u img=''；
$（'#img'）.html（real#img）；

在@Engineer的帮助下，这里列出了与我有相同问题的人的解决方案

HTML

你好，世界

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

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)
});

var urlRegex=/（\b（https？| ftp |文件）：\/\/[-A-Z0-9+&@#\/%？=~~|！：，.；]*[-A-Z0-9+&@#\/%=~|]/ig；
var photoRegex=/（\b（https？| ftp |文件）：\/\/[-A-Z0-9+&@#\/%？=~~|！：，.；]*[-A-Z0-9+&@#\/%=~|]）（？：jpg | gif | png）/ig；
var url_url=$（'#内容url'）.html（）.match（urlRegex）；
var url_photo=$（'#content url'）.html（）.match（photoregx）；
//增加
$（'#内容url'）.html（$（'#内容url'）.html（）.replace（urlRegex'））；
//----------
$.each（url\u url，函数（i，值）{
var convert_url='
'；
$（'#url'）。追加（转换url）
});
$。每个（url\u照片，函数（i，值）{
var convert_photo='
'；
$（“#照片”）。附加（转换#照片）
});

---

感谢大家

你提前知道url的格式吗？不，图像url和图像文件类型完全不同。如果我理解你的意思，请检查一下，看看是否对你有帮助，也许可以给你一些启发问题是，我需要先检测一个有效的图像url，然后用html图像显示代码替换它们我搜索到evite使用php到evite服务器工作，稍后我将用jquerywell实现一些其他功能，尝试将该函数转换为Javascript这是一个好主意，但我不是一个优秀的编码员，我不知道如何实现这一点好的，我试图为您实现这一点，但它没有完全发挥作用。。查看一些教程，并试图找出它的问题，以添加id到我的网址我需要它来检测id首先从文本在div你可以请解释多一点，这样我可以提供你的解决方案我有文本评论列表。现在有些评论包含图片url或简单的网站url。现在我需要先检测url，然后检测url的类型。然后替换它，就像您告诉var real_img=''；这里有三件大事。第一个图像url，第二个web url和第三个视频url。你想要这三个，还是仅仅是一个形象？如果可能的话，这三个都将是狡猾的完美和伟大的

<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>

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)
});