Facebookの「What'sonyour mind?」にリンク(動画、画像、URLなど)を入力すると フォームでは、リンクを自動検出し、テキスト領域の下に簡単な説明が付いたサムネイルに変換します。誰かが私にこれを達成する方法を進めるための洞察またはリンクを提供できますか?
3 に答える
のようなものを使用して
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
textareachangeイベントに添付されたjavascriptがあります。javascriptは、textareaのコンテンツがurlであるかどうかを検出します。そうである場合、javascriptは、URLにアクセスしてページタイトルやページの説明など(またはオープングラフプロトコルのメタタグ)を探すWebサービスを呼び出します。それらが適切に編成するjavascriptに返されるタグのそれぞれを見つけます。
Facebookもこのコンテンツをキャッシュし、同じURLが別のユーザーによって投稿された場合、そのユーザーはページに再度アクセスする代わりにキャッシュ値を使用します。
オープングラフプロトコルメタタグ:
http://developers.facebook.com/docs/opengraphprotocol/
警告-正規表現がチェックされないように、仕事に出かける必要があります。
^http:...[^\s]
リンク値を取得し、それらを検索し^https:...[^\s]
て返す正規表現を実行します。
次に、それらのURLをサーバーに渡し、サーバーにドキュメントを取得させ、スニピットを返してドキュメントに挿入します。Javascript自体にはセキュリティ上の制限があるため、支援するには独自のサーバーが必要です。詳細についてはGooglesame origin policy
をご覧ください。