如何检测和转换来自纯文本URL的URL图像和视频？ [英] How to Detect and Convert URL images and Videos from Plain Text URL's?

问题描述

您好，我需要检测并转换来自纯文本网址的url图像和视频。

Html

 < div id =content-url> 
 Hello World< br> 
 http://www.goalterest.com/< br> 
 http://www.esotech.org/wp-content/uploads/2011/12/jquery_logo.png 
 http://www.esotech.org/wp-content/uploads 
 < / 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）; 
 
 var convert_url ='< a href ='+ url_url +'>'+ url_url +'< / a>'; 
 var convert_photo ='< img src ='+ url_photo +'width =150height =150alt =Nba>'; 
 $（'＃content-url'）。append（convert_url）; 
 $（'＃content-url'）。append（convert_photo）; 
  

这里演示
http://jsfiddle.net/nqVJc/3/

在演示中，我得到了检测和转换为网址和照片，但问题是什么时候有多个url Url不分隔

解决方案

匹配元素：

  $。each（url_url，function（i，value）{
 var convert_url ='< a href ='+ url_url [i] +'>'+ url_url [i] +'< / a>'; 
 var convert_photo ='< img src =''+ url_photo [i] +'width =150height =150alt =Nba>'; 
 $（'＃content-url'）。append（convert_url，convert_photo）
}）; 
  

这是 DEMO 。

要删除匹配的网址，您需要在 $之前添加这些行。每个：

  $（'＃content-url'）。html（$（'＃content -url '）的HTML（）代替（urlRegex，''））; 
 
 //$.each去这里
  

Hi i need to detect and convert urls images and video from plain text urls

Html

<div id="content-url">
 Hello World<br>
 http://www.goalterest.com/  <br>
 http://www.esotech.org/wp-content/uploads/2011/12/jquery_logo.png
 http://www.esotech.org/wp-content/uploads
</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);

  var convert_url='<a href="'+url_url+'">'+url_url+'</a>';
var convert_photo='<img src="'+url_photo+'" width="150" height="150" alt="Nba">';
$('#content-url').append(convert_url);
$('#content-url').append(convert_photo);

Here Demo http://jsfiddle.net/nqVJc/3/

In the demo i get the way to detect and convert to url and photo but the problem ist when ist there multiple urls The Urls are not separated

解决方案

You are not iterating through the matched elements :

$.each( url_url, function(i,value){
   var convert_url='<a href="'+url_url[i]+'">'+url_url[i]+'</a>';
   var convert_photo='<img src="'+url_photo[i]+'" width="150" height="150" alt="Nba">';
   $('#content-url').append(convert_url,convert_photo)
});

Here is DEMO.

For removing matched urls you need to add this lines before $.each :

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

//$.each goes here

这篇关于如何检测和转换来自纯文本URL的URL图像和视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！