如何从纯文本 URL 中检测和转换 URL 图像和视频？答案

【问题标题】：How to Detect and Convert URL images and Videos from Plain Text URL's?如何从纯文本 URL 中检测和转换 URL 图像和视频？
【发布时间】：2012-06-09 13:09:27
【问题描述】：

您好，我需要从纯文本网址检测和转换网址图像和视频

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

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

在演示中，我得到了检测和转换为 url 和照片的方法，但问题在于当存在多个 url 时，Urls 没有分开

【问题讨论】：

您是想用图片替换链接，还是将图片和链接附加到底部？
我认为最好的方法是替换检测到的 url 或在附加后隐藏它们

标签： javascript jquery html regex image

【解决方案1】：

你没有遍历匹配的元素：

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

这里是DEMO。

要删除匹配的 url，您需要在 $.each 之前添加以下行：

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

//$.each goes here

【讨论】：

这非常有帮助，几乎解决了所有需求这里是更新的DEMO [链接]jsfiddle.net/nqVJc/7/[link]现在我只需要隐藏检测到的纯文本网址
完美你我的保护者谢谢
@RobertMrsic 我会更新我的答案，所以你可以接受它。
我已经接受了，但只是一个问题，我可以用同样的方式隐藏转换后的照片网址
@RobertMrsic 是的，使用正确的RegExp。

【解决方案2】：

您的正则表达式可以改进。 URI.js 提供 URI.withinString() 来提取 URL。这里使用的正则表达式是gruber revised:

/\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/ig

【讨论】：