检测并显示表单文本区域中的链接

Question

当我在Facebook中输入一个链接（视频，图像，URL等）时，“你有什么想法？” 表单，它会自动检测链接并将其转换为缩略图，并在文本区域下方添加简要说明。 任何人都可以为我提供见解或链接，让我了解如何实现这一目标？

Answer 1

有一个附加到textarea更改事件的JavaScript。 javascript检测textarea的内容是否为url，如果是，则javascript调用访问url的webservice寻找页面标题，页面描述等（或者打开图形协议元标记），如果是找到每个标签，然后将它们返回给正确组织的javascript。

Facebook也会缓存此内容，如果其他用户发布了相同的网址，则他会使用缓存值而不是重新访问该网页。

开放图协议元标记：

http://developers.facebook.com/docs/opengraphprotocol/

Answer 2

使用类似的东西

var input = document.getElementById("textarea");
input.addEventListener("change", checkLink(e));
input.addEventListener("blur", checkLink(e));

function checkText(text){
     var exp = "((ht|f)tp(s?))(:((\/\/)(?!\/)))(((w){3}\.)?)([a-zA-Z0-9\-_]+(\.(com|edu|gov|int|mil|net|org|biz|info|name|pro|museum|co\.uk)))(\/(?!\/))(([a-zA-Z0-9\-_\/]*)?)([a-zA-Z0-9])+\.((jpg|jpeg|gif|png)(?!(\w|\W)))";
     return text.match(exp);
}
function checkLink(e){
     //here you would want to use a regular expression and check for http:

     var regularExpression = !!checkText(e.target.innerHTML); // returns true or false
     if(regularExpression){
       e.target.innerHTML += "<a href='#'><img src="" alt="" /></a>";
     }
}

正则表达式的良好资源 - http://regexlib.com/Search.aspx?k=image&c=-1&m=-1&ps=20

Answer 3

警告 - 必须离开工作，因此不检查正则表达式。

获取链接值并通过查找^http:...[^\\s]或^https:...[^\\s]的正则表达式运行它并返回它们。

然后，将这些URL传递到您的服务器，让您的服务器检索文档并为您返回一个snippit然后放入您的文档。 您必须拥有自己的服务器才能提供帮助，因为Javascript本身具有安全限制。 谷歌的same origin policy更多信息。