如何從純文本URL檢測並轉換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="150" height="150" alt="Nba">'; 
$('#content-url').append(convert_url); 
$('#content-url').append(convert_photo);

這裏演示 http://jsfiddle.net/nqVJc/3/

在演示中，我得到檢測和轉換爲網址和照片的方式，但問題是何時出現多個URL Urls不分開

來源

2012-06-09 Robert Mrsic

您是試圖用圖像替換鏈接，還是將圖像和鏈接追加到底部？ – ddlshack

我認爲這是最好的方式是更換檢測到的網址或只是隱藏後追加 –

你是不是通過匹配的元素進行迭代：

$.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。

爲了去除匹配的網址，你需要$.each之前添加此行：

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

//$.each goes here

來源

2012-06-09 13:14:18 Engineer

這是非常helful幾乎解決了所有需求這裏更新DEMO [鏈接] http://jsfiddle.net/nqVJc/7/ [鏈接]現在我只需要隱藏檢測到的純文本網址 –

@RobertMrsic這是你在找什麼 - > http://jsfiddle.net/uCDRp/ – Engineer

完美你我的救星謝謝你 –

您正則表達式可以改善。 URI.js提供URI.withinString()來提取網址。這裏使用的正則表達式是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

來源

2012-06-19 08:46:36 rodneyrehm

如何從純文本URL檢測並轉換URL圖像和視頻？

回答

相關問題