檢測並顯示表單文本區域中的鏈接

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更多信息。